Bootstrap Change Div Order with Pull-Right, Pull-Left on 3 Columns

Bootstrap change div order with pull-right, pull-left on 3 columns

Bootstrap 3

Using Bootstrap 3's grid system:

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

Working example: http://bootply.com/93614

Explanation

First, we set two columns that will stay in place no matter the screen resolution (col-xs-*).

Next, we divide the larger, right hand column in to two columns that will collapse on top of each other on tablet sized devices and lower (col-md-*).

Finally, we shift the display order using the matching class (col-md-[push|pull]-*). You push the first column over by the amount of the second, and pull the second by the amount of the first.

Change div order with bootstrap 3

Another possible solution I find simpler :

<div class="container">
 <div class="row">
   <div class="col-md-3 col-sm-6 col-xs-12 img">
     img
   </div>
   <div class="visible-sm col-sm-6 price">
     price
   </div>
   <div class="col-md-6 col-sm-12 col-xs-12 mytable">
     table
   </div>
   <div class="col-md-3 hidden-sm col-xs-12 price">
     price
   </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.

Order columns through Bootstrap4

2021 - Bootstrap 5

The responsive ordering classes are now order-first, order-last and order-0 - order-5

Demo

2018 - Bootstrap 4

The responsive ordering classes are now order-first, order-last and order-0 - order-12

The Bootstrap 4 **push** **pull** classes are now `push-{viewport}-{units}` and `pull-{viewport}-{units}` and the `xs-` infix has been removed. To get the desired 1-3-2 layout on mobile/xs would be: [Bootstrap 4 push pull demo](http://www.codeply.com/go/OmrcmepbUp) (This only works pre 4.0 beta)

---

Bootstrap 4.1+

Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12, responsively such as order-md-12 order-2 (last on md, 2nd on xs) relative to the parent .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

Demo: Change order using order-* classes

Desktop (larger screens):

Mobile (smaller screens):

It's also possible to change column order using the flexbox direction utils...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

Demo: Bootstrap 4.1 Change Order with Flexbox Direction

---

Older version demos

demo - alpha 6

demo - beta (3)

See more Bootstrap 4.1+ ordering demos

---

Related

Column ordering in Bootstrap 4 with push/pull and col-md-12

Bootstrap 4 change order of columns

A-C-B A-B-C

Bootstrap 3: pull-right for col-lg only

You could put "element 2" in a smaller column (ie: col-2) and then use push on larger screens only:

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

Demo: http://bootply.com/88095

Another option is to override the float of .pull-right using a @media query..

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Lastly, another option is to create your own .pull-right-lg CSS class..

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

UPDATE

Bootstrap 4 includes responsive floats, so in this case you'd just use float-lg-right.
No extra CSS is needed.

Bootstrap 4 Demo

Bootstrap 3 - Change stack order using pull/push?

On the first sight your question seems very similar to Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid). But that solution (and the *-pull- and *-push-* classes) only works when you want to interchange elements in a row which span together a 12 columns width.
In your situation you have two elements which span 12 columns each and have each a width of 100%. Based on Swap DIV position with CSS only BS indeed does not offers a solution for your situation.

You can use jQuery (javascript) or create a duplicate red row and hide / show that with the responsive-utilities

What happened to the .pull-left and .pull-right classes in Bootstrap 4?

Back in 2016 when this question was originally asked, the answer was:

$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')

But now the accepted answer should be Robert Went's.

Special arrangement of columns in Desktop and re-order columns in Mobile responsive using Bootstrap 4

Flexbox started with alpha 6, so the beta really wouldn't make a huge difference in this case (although the class names have changed from alpha-6 to beta). Bootstrap 4 (stable) is out today (1/18/18).

When using flexbox, the cols in each row are the same height, which won't work for your desired desktop layout. I would use d-md-block on the row to override the display:flex on larger (md) screens. Then use float-left and float-right to position the cols on desktop. The flexbox will still kick in on smaller screens so the floats will be ignored and cols will stack vertically as expected.

https://www.codeply.com/go/sTvrYlB1V0

<div class="container-fluid">
  <div class="row h-100 d-md-block d-flex">
    <div class="col-12 col-md-4 float-left">
      1 Some content
    </div>
    <div class="col-12 col-md-4 float-left">
      2 Some content
    </div>
    <div class="col-12 col-md-4 special-height float-right">
      3 Some other content
    </div>
    <div class="col-12 col-md-8 special-height-small mt-2 float-left">
      4 Special content
    </div>
  </div>
</div>

---

Related Topics