Rearrange Bootstrap Column Order with Push and Pull Classes

Suppose you have three columns, left-sidebar, main-content, right-sidebar. when the page is opened on small screen size the left-sidebar will be stacked at the top followed by the main-content and right-sidebar.

What if you wanted to get the main-content at the top followed by the left-sidebar and right-sidebar?

This can be accomplished by the bootstrap column push and pull classes.

<div class="row">

 <div class="col-sm-8 col-sm-push-2">
  <div style="background-color:red;color:#fff">main-content</div>
 </div>

 <div class="col-sm-2 col-sm-pull-8">
  <div style="background-color:blue;color:#fff">left-sidebar</div>
 </div>

 <div class="col-sm-2">
  <div style="background-color:blue;color:#fff">right-sidebar</div>
 </div>

</div>

on large display

on mobile display