Describe a real-time implementation of column ordering? or Describe a situation where you have used column ordering.

Solution

Consider a website in which we have site navigation on the left-hand side and the main content at the right-hand side. Left Navigation is taking 3 columns and main content of the website is taking 9 columns of total 12 column grid structure. This type of structure works well in large, medium and small devices but at mobile devices this structure will not work as mobile devices are very small. So in this situation, we may use column ordering to pill main content 3 column left and push navigation item 9 column towards the right side of the screen.

So we will have our main content which user want to see at the top and navigation item will be stacked down.

<div class="row">
<div class="col-md-3 col-sm-push-9">
</div>
<div class="col-md-9 col-sm-pull-3">
</div>