What is column ordering and how it works?

Solution

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.

Example

<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>

Share this thread

Comments

Comments
comments powered by Disqus

Navigation

Social Media