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;
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> <div class="col-md-9 col-sm-pull-3"> <article>Main content</article> </div> </div>