How to change stacking order of columns?

Answer 1

Bootstrap's col-** classes have position: relative; property. So when you set additionally col-**-push-** or col-**-pull-** classes you change column order moving using left or right properties.

You can try like this:

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-push-4">
        Header Content Middle
    </div>
    <div class="col-sm-4 col-sm-push-4">
        Header Content Right
    </div>
    <div class="col-sm-4 col-sm-pull-8">
        Header Content Left
    </div>
  </div>
</div>

Example in Codepen is here

P.S. One thing to know I have changed column order in my example to achieve right column order when columns are collapsed.

Answer 2

use pull/push classes like this to achieve what you want:

<div class="container">
<div class="row">
    <div class="col-sm-4 col-sm-push-8">
        Header Content Left
    </div>
    <div class="col-sm-4 col-sm-pull-4">
        Header Content Middle
    </div>
    <div class="col-sm-4 col-sm-pull-4">
        Header Content Right
    </div>
</div>

http://jsfiddle.net/DTcHh/1040/

Answer 3

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:

<div class="row">
    <!--first column so start at 0 then push it to the right 4 -->
    <div class="col-sm-4 col-sm-push-4">
       Header Content Middle
    </div>

    <!-- start at 4 then push to the right 4 -->
    <div class="col-sm-4 col-sm-push-4"> 
        Header Content Right
    </div>

    <!-- start at 8 then pull to the left 8 -->
    <div class="col-sm-4 col-sm-pull-8">
        Header Content Left
    </div>
  </div>

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