Bootstrap right Column on top on mobile view

Answer 1

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>

Answer 2

The below code work for me

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

Answer 3

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>

Answer 4

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.

Answer 5

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