Twitter Bootstrap: Column Re-Ordering for Full Width Divs

Twitter Bootstrap: column re-ordering for full width divs

Its doable if you think mobile first. Place the divs in the order you want them to appear in small viewports and then reorder them for larger viewports.

<div class="row">
    <div class="col-sm-12 col-md-6 col-md-push-6">
        <div style="background:red">
            Put the one that for small screen on top
        </div>
    </div>
    <div class="col-sm-12 col-md-6 col-md-pull-6">
        <div style="background:green">
            Put the one that for small screen on bottom
        </div>
    </div>
</div>

Twitter Bootstrap: column re-ordering for full width divs

Its doable if you think mobile first. Place the divs in the order you want them to appear in small viewports and then reorder them for larger viewports.

<div class="row">
    <div class="col-sm-12 col-md-6 col-md-push-6">
        <div style="background:red">
            Put the one that for small screen on top
        </div>
    </div>
    <div class="col-sm-12 col-md-6 col-md-pull-6">
        <div style="background:green">
            Put the one that for small screen on bottom
        </div>
    </div>
</div>

Reordering divs responsively with Twitter Bootstrap?

Users of Bootstrap 4 or Bootstrap 5 will want to see this question:
Bootstrap change order of columns

---

Bootstrap 3 (original answer)

I think you want to look at the push and pull classes...

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>

Demo: http://bootply.com/77853

Change the order of full width columns in Bootstrap

If you want to achieve this with flexbox you can do the following:

Create a class modifier for Bootstrap's row class.

.row--flex {
  display: flex; /* Creates a flex container. */
  flex-wrap: wrap; /* Wrap columns, now flex-items. */
}

Since Bootstrap's col-* classes already set a different width percentage for each viewport using media queries and our flex-container has flex-direction: row; by default, you will not need to define a flex-basis on flex-items, here's why.

---

Then you remove the floats, because they are not needed anymore:

.row--flex [class^="col-"],
.row--flex [class*="col-"] {
  float: none;
}

---

Finally you use a selector in the element with the col-* class you want to move.

We will use the class col-order-* as a selector.

Move the second column down changing its order property value to 1 and you're done.

The CSS order property specifies the order used to lay out flex items
in their flex container.

The default order value in flex-items is 0, that's why using any value higher than that will work.

CSS:

.col-order-1 {
  order: 1;
}

HTML:

<div class="container">
  <div class="row row--flex">
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
    <div class="col-xs-12 col-sm-12 col-order-1">col-sm-12</div>
    <div class="col-xs-12 col-sm-6">col-sm-6</div>
  </div>

---

Code Snippet:

.row--flex {  display: flex;  flex-wrap: wrap;}.row--flex [class^="col-"],.row--flex [class*="col-"] {  float: none;}.col-order-1 {  order: 1;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <div class="row row--flex">    <div class="col-xs-12 col-sm-6">col-sm-6</div>    <div class="col-xs-12 col-sm-12 col-order-1">col-sm-12</div>    <div class="col-xs-12 col-sm-6">col-sm-6</div>  </div></div>

Bootstrap: change order of fullwidth columns on mobile devices

Place the columns in their mobile first order, and then use push/pull to re-order them on larger screens...

<div class="col-xs-12 col-md-5 col-md-push-7">2</div>
<div class="col-xs-12 col-md-7 col-md-pull-5">1</div>

http://codeply.com/go/PetKacoXyT

Bootstrap 3 change fullwidth column order

There is already a solution using Bootstrap reordering but not for 100% width columns, the below solution uses Flexbox method.

@media (max-width: 768px) {  .reorder .row {    display: flex;    display: -ms-flex;    flex-direction: column;  }  .reorder .row .item1 {    order: 2;  }  .reorder .row .item2 {    order: 1;  }}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><div class="container reorder">  <div class="row">    <div class="col-sm-12 item1">
      <p>Ooo content</p>
    </div>    <div class="col-sm-12 item2">
      <p>Ooo more content</p>
    </div>  </div></div>

Bootstrap Column Reordering Sizing Problems

Some general markup issues:

• First of all, there's no col-xl-*, so you can get rid of those.
• Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
• Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.

The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.

The whole thing can be rewritten like this:

.red  { background: red  }.blue { background: blue }

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">  <div class="row ">    <div class="col-md-4 col-md-push-8 red"> Basket </div>    <div class="col-md-8 col-md-pull-4 blue"> News </div>  </div></div>

How do I change Bootstrap 3 column order on mobile layout?

You cannot change the order of columns in smaller screens but you can do that in large screens.

So change the order of your columns.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

By default this displays the main content first.

So in mobile main content is displayed first.

By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.

Working fiddle here.

How to reorder bootstrap columns vertically

You can achieve this with flexbox.

All three boxes need to be inside a flex container display: flex;. You then give all of the div's inside the flex container an order that kicks in using a media query in the desired screen width order: 1;.

The other main parts of the CSS are there to make sure that the three boxes are sized correctly into a column.

flex-direction: row;
flex-grow: 1;
flex-wrap: wrap

The HTML

<div class="container">
  <div class="row flex-container">
    <div id="sectionA" class="col col-sm-12 col-md-6 a">Section A</div>
    <div id="sectionAInfo" class="col col-xs-12 a">More Info about Section A</div>
    <div id="sectionB" class="col col-sm-12 col-md-6 b">Section B</div>
  </div>
</div>

The CSS

@media screen and (min-width: 991px) {
  .flex-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: wrap
  }
  #sectionA {
    order: 1;
  }
  #sectionAInfo {
    order: 3;
  }
  #sectionB {
    order: 2;
    float: right;
  }
}

A working codepen https://codepen.io/Washable/pen/zPoeqY?editors=1100

---

Related Topics