Bootstrap right Column on top on mobile view

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|

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

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.