What is column ordering and how it works?


In bootstrap columns are displayed in the order in which they are defined. Now If there is a requirement to change the ordering of columns then we can use column ordering classes defined in bootstrap. We have following 2 classes for column ordering;

.col-md-push- *

.col-md-pull- *

Here * represents the number of columns to be ordered.

Note: push and pull are relative. If you push a column towards right then you need to pull a column towards left in order to keep design consistent. In place of md we may also use sm, lg, xs depending the size of the screen for which you want to implement column ordering.


<div class="row">
  <div class="col-md-3 col-sm-push-9">
     <aside>Left Navigation</aside>
  <div class="col-md-9 col-sm-pull-3">
     <article>Main content</article>

Share this thread


comments powered by Disqus


Social Media