Why Use Column Ordering? A Simple Use Case...

The layout above is easily achieved using the follow Bootstrap markup. When the sm breakpoint of less than 992 pixels is reached, the columns stack vertically and become 100% width. This places the sidebar above the main content on smaller devices.

    	
<div class="row">
  <div class="col-sm-3"> sidebar </div>
  <div class="col-sm-9"> main content </div>
</div>
        
		

The Problem: Placing the sidebar above the main content may not be desired since the sidebar will push down the main content requiring users to scroll down on smaller devices.

The Fix: To resolve this, we use Bootstrap's push and pull classes to order the columns. The markup changes to:

    	
<div class="row">
  <div class="col-sm-9 col-sm-push-3"> main content </div>
  <div class="col-sm-3 col-sm-pull-9"> sidebar </div>
</div>
        
		

Since we've placed the main content first, it will appear first when stacked vertically on smaller devices. For the larger widths, push is used to keep the main content on the right, while pull is used to keep the sidebar on the left. As a result, our main content appears first on smaller devices.

Think Mobile First.

Now let's try a slightly more complex scenario to demonstrate why it's always important to think "mobile-first" when it comes to column ordering.

Consider this desired 5 column layout:

In this layout, we want the wider columnns (1 and 2) to appear first on smaller devices. On larger devices we want the wider columns (1 and 2) to wrap the outside of the smaller columns (3,4 and 5).

Wrong way: Thinking large screen (desktop, laptop, etc..) first, we would use this markup..

    	
		
<div class="row">
  <div class="col-md-3"> 1 </div>
  <div class="col-md-2"> 3 </div>
  <div class="col-md-2"> 4 </div>
  <div class="col-md-2"> 5 </div>
  <div class="col-md-3"> 2 </div>
</div>
        
		

The markup works on larger screen widths, but on smaller screen widths the columns are in the wrong order..

Right way: Thinking small screen (phone, tablet, etc..) first, we create the desired smaller layout using this markup..

    	
<div class="row">
  <div class="col-xs-6"> 1 </div>
  <div class="col-xs-6"> 2 </div>
  <div class="col-xs-4"> 3 </div>
  <div class="col-xs-4"> 4 </div>
  <div class="col-xs-4"> 5 </div>
</div>
		

This markup gives us the small device layout we want, in the order we want..

Next, we work on the large device layout by adding the appropriate larger screen (md) column sizes..

    	
<div class="row">
  <div class="col-xs-6 col-md-3"> 1 </div>
  <div class="col-xs-6 col-md-3 col-md-push-6"> 2 </div>
  <div class="col-xs-4 col-md-2 col-md-pull-3"> 3 </div>
  <div class="col-xs-4 col-md-2 col-md-pull-3"> 4 </div>
  <div class="col-xs-4 col-md-2 col-md-pull-3"> 5 </div>
</div>
		

Using the push and pull classes we've pushed the 2nd column all the way to the right,
and pulled the 3 smaller columns back to the left. Now we have the desired large device layout...

In thinking "mobile-first", we created the smaller device markup, and then added classes to support the larger device widths. Now we have the responsive layout working with different devices and screen widths.

Nest Smaller Inside Larger.

Another rule to follow when creating ordered columns is to place the desired smaller layout columns, inside the larger layout columns using nesting.

Consider this desired 4 column layout..

A simple push pull won't work in this case because of the desired column order. However, Bootstrap allows us to nest `rows` and `col-*` inside other `col-*` which enables us to have more control over when columns stack vertically at specific breakpoints. If we remember this, while continuing to think "mobile-first", we nest the desired smaller device layout inside the larger layout like this...

<div class="row">  
     <div class="col-md-4 col-md-push-8 col-xs-12">
         <div class="row">
            <div class="col-xs-6 col-md-12"><div class="well">2</div></div>
            <div class="col-xs-6 col-md-12"><div class="well">4</div></div>
         </div>
     </div>
     <div class="col-md-8 col-md-pull-4 col-xs-12">
         <div class="row">
      	    <div class="col-xs-12"><div class="well">1</div></div> 
            <div class="col-xs-12"><div class="well">3</div></div>
         </div>
     </div>  
</div>
	  

Height Matters.

Bootstrap always columns float left until stacked. As a result, shorter columns that exceed the 12 column total will naturally keep to the right of taller columns.

When columns are about the same height, they stack into rows when the columns total exceeds 12 like this:

But, when we have a taller columns, any shorter columns that follow will automatically float to the right:

Caveat: When push or pull is used, shorter columns no longer float to the right of taller columns.

Don't Panic, Just Float.

In some cases it may be necessary to float a column to the left or right to get the layout you want.

When All Else Fails.

Not every use case will work using Bootstrap's push and pull classes.

Nesting