Bootstrap: How to change the order of div in fluid-row?

Question

How to re-arrange/swap the order of some fluid container/row in bootstrap.....

If we take an example of bootstrap's fluid example on following page:

http://twitter.github.com/bootstrap/examples/fluid.html

They have sidebar on left in a fluid row and then a hero unit in same row. And then some content in next row. When we switch to mobile view/smaller screens, it appears in same sequence. But how can we change that order. i.e. how to show the sidebar at the end and hero unit on top of the page?

Answer 1

The new version of Bootstrap v3 now supports column ordering:

Column ordering

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

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

Will give the following order:

 ----------------------------
|     3     |      9       |
----------------------------

Documentation: http://getbootstrap.com/css/#grid-column-ordering