How to change stacking order of columns?

Answer 1

To extend neilhem's answer, the push and pull modifiers are what you're looking for.

From the doc:

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

Basically, what these modifiers do is push (move to the right) or pull (move to the left) the column based on the offset you supply, where the starting point is based on the order of the column within the row. It can be read like this:

/* column  size  direction  offset */
   .col    -sm   -push      -4 

So for your example you'd want something like:

    
    

       Header Content Middle
    

    
    
 
        Header Content Right
    

    
    

        Header Content Left
    
  

DEMO

---

Here is a visual breakdown of what's going on step-by-step:

1. before reordering:

   [    column 1    ][    column 2    ][    column 3    ]
   

   example

2. push the first column 4 offsets:

   [    offset 4    ][   column 1-2   ][    column 3    ]
                         ^ they are on top of each other at this point
   

   example

3. push the second column 4 offsets:

   [     offset 4    ][    column 1    ][  column 2-3   ]
                                           ^ they are on top of each other at this point
   

   example

4. pull the third column 8 offsets:

   [     column 3    ][    column 1    ][  column 2     ]
         ^ column 3 falls into the open offset caused by column 1's push 
   

   example