Linux, OpenSource, Programming And Hacks

Mar 23, 2018

Rearrange Bootstrap Column Order with Push and Pull Classes

Mar 23, 2018

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

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


on large display

on mobile display

No comments:

Post a Comment