CODEWITHSUNDEEP
htmltwitter-bootstrap-3
j00m
j00m

Reputation: 501

Switch bootstrap columns on mobile view

Consider the following:

<div class="row">
    <div id="side_panel" class="col-md-3 cold-xs-12">
        Side panel
    </div>
    <div id="mainContentRight" class="col-md-9 cold-xs-12 ">
        Main content area   
    </div>
</div>

Is there a way to switch the order of these columns for mobile view so that the main content appears before the side panel?

Upvotes: 4

Views: 2510

Answers (2)

m4n0
m4n0

Reputation: 32355

Unfortunately, You can not reorder using push and pull for 12 column classes i.e. col-xs-12. Either change the markup to be able to include the 12 column grid system or use a simple solution using flexbox below:

@media (max-width: 768px) {
  .reorder {
    display: flex;
    flex-direction: column;
  }
  #side_panel {
    order: 2;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row reorder">
  <div id="side_panel" class="col-md-3 cold-xs-12">
    Side panel
  </div>
  <div id="mainContentRight" class="col-md-9 cold-xs-12">
    Main content area
  </div>
</div>

Upvotes: 0

Will
Will

Reputation: 3044

Bootstrap is a mobile first platform so change your mark up to how you want it to look on the mobile with the full xs-12. You can then use push and pull to move the column. Here is a link to the doc's.

<div class="row">
    <div id="mainContentRight" class="col-md-9 col-md-push-3 cold-xs-12 ">
        Main content area   
    </div>
    <div id="side_panel" class="col-md-3 col-md-pull-9 cold-xs-12">
        Side panel
    </div>
</div>

Upvotes: 3

Related Questions