Bootstrap right Column on top on mobile view

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.

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|

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.

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

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