190

I have a Bootstrap Page like this:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

Looks like:

-----
|A|B|
-----

So if I look at it on a mobile Device, the Column A is on top, but I want the B on top. Is this possible? I tried it with push an pull, but it didn't work.

1
  • 2
    For Bootstrap 4 see answer of salmanhijazi Commented Jan 10, 2018 at 9:48

11 Answers 11

282

Use Column ordering to accomplish this.

col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.

I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...

DEMO

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

view-port >= md

|A|B|

view-port < md

|B|
|A|
5
  • 6
    @JackTheKnife Take a look at the other answer to this question... you push or pull a column by the width of the other column.
    – Schmalzy
    Commented Apr 10, 2015 at 18:37
  • 1
    @Schmalzy O yeah - other answer has better explanation. Also found that useful: scotch.io/tutorials/reorder-css-columns-using-bootstrap Commented Apr 10, 2015 at 20:54
  • 1
    Having trouble with three column, where the stack order should be center, left, right.
    – Goose
    Commented Jul 2, 2016 at 23:42
  • @AmirDora This is specifically regarding Bootstrap v3. You are likely using v4 in a new asp.net core project, to which this answer does not apply.
    – Schmalzy
    Commented Aug 25, 2020 at 19:12
  • 1
    It looks like this approach is obsolete in Bootstrap 4; try column ordering instead: stackoverflow.com/questions/47251394/… Commented Sep 17, 2020 at 14:27
80

It's worth noting that if you are using columns that are not both equal to 6, then the push amount will not equal the initial column size.

If you have 2 columns (A & B) and wish for column A to be smaller and to the right on "sm" or greater viewports, but atop a mobile (xs) viewport, you would use the following:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

Otherwise, the alignment of the columns will appear off.

2
  • How can i use in this when i have offset set <div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div> Commented Aug 31, 2017 at 21:21
  • 1
    It looks like this approach is obsolete in Bootstrap 4; try column ordering instead: stackoverflow.com/questions/47251394/… Commented Sep 17, 2020 at 14:27
39

Flexbox Direction

For Bootstrap 4, apply one of the following to your .row div:

.flex-row-reverse

For responsive settings:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
1
  • any idea how to achieve the same in vuetify ? Commented Dec 21, 2018 at 8:36
21

In Bootstrap 4, let's say you want to have one order for large screens and a different order for smaller screens:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

You can omit order-1 and order-2 above. Just added for clarity. Default order will be the order the columns appear in the html.

For more info https://getbootstrap.com/docs/4.1/layout/grid/#reordering

0
12

The below code work for me

.row {
    display: flex;
    flex-direction: column-reverse;
}
11

This is now done (in Bootstrap v4) by adding order-# classes.

See https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Like this:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>
1
  • it will completely change the order even not on mobile view.
    – Jovylle
    Commented Dec 13, 2020 at 13:59
5

I have three bootstrap 4 columns of different sizes. As the screen gets smaller the third column is hidden, then when the screen gets smaller still and the divs are stacked the order changes so that column 2 is at the top.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

I hope this helps. I found it difficult to understand this but finally got there with the help of this thread, but it was a bit hit and miss.

1
  • awsome . exact thing, which i was looking for Commented Feb 6, 2021 at 6:44
4

I used:

.row {
   display: flex;
   flex-direction: row-reverse;
}
0
4

This worked for me on Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>
4

Bootstrap 4 includes classes for flex. See: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>
0

In Bootstrap V4 (Released January 18, 2018) You can use Reordering Classes. Info here under Reordering tab.

https://getbootstrap.com/docs/4.0/layout/grid/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.