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://

Answer 1

You have to keep in mind that the grid doesn't support this by default, but there are ways to deal with that.

You could for example inverse both spans (set the order of the mobile view) and force the normal positioning with floating :

Then, .span elements are more or less modified correctly for smaller screens, but you still have a few rules to fix this behavior :

.row-fluid .pull-left[class*="span"]:last-child { margin-left: 0; }

@media (max-width: 767px) {
    .row-fluid .pull-right[class*="span"] { float: none; }
}

If you use more than two columns, you will have to inverse margin of .pull-right elements (except the last one) - something like :

.row-fluid .pull-right[class*="span"] { margin-right: 2.5641%;margin-left: 0; }
.row-fluid .pull-right[class*="span"]:first-child { margin-right: 0; }

Live demo (jsfiddle) and fullscreen (some styles must be set between normal and responsive, hence the jsfiddle "hack" in the style panel)