Ordering your bootstrap columns

How do you make the bootstrap column on the right stack on top of the column on the left in mobile view?

eg01

When you view this layout on a mobile – the bootstrap columns will rearrange to look like this.

eg02

But how do you make it look like this?
With the image that is in the right side col on top of the text that is in the left side col.

eg3

The trick is to put whatever you want to be on top first in the code – like this.
<div class=”row”>
<div class=”col-md-6″>IMAGE GOES HERE</div>
<div class=”col-md-6″>TEXT GOES HERE</div>
</div>

Then you use –
col-md-push-6
and
col-md-pull-6

So your final code would be

<div class="row">
  <div class="col-md-6 col-md-push-6">IMAGE GOES HERE</div>
  <div class="col-md-6 col-md-pull-6">TEXT GOES HERE</div>
</div>

Leave a Comment