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?


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


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.


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>

Then you use –

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>

Leave a Comment