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

If you want your side bar under your hero but above other things, that's going to take some dom manipulation since it's not simply a matter of putting the list before/after everything, but rather in between elements. Something like this should work:

$(window).resize(function () {
    if ($(window).width() < 480) {
        $("#sidebar").insertAfter($("#hero"));
    } else {
        $("#sidebar").prepend($("#containingrow"));
    }
});

Answer 2

I'm working on a plugin for sorting and adding elements to Bootstrap grids. It's very rough and fragile at the moment, but if only used for basic functions I believe it would survive a production environment.

The plugin requires that grids be consistent, all a particular width of span, but it might help with this.

It's best to do all this type of work before the markup renders, but I use Bootstrap in some cases where I cannot sort beforehand due to limitations of some template languages that I am forced to use.

Github
Codepen

Answer 3

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

Answer 4

You can do it using media queries, a new possibilty offered by CSS3.

With media queries you could create styles that get only applied to certain types of screens for example. If you wanted to make that thing you're talking about you could to something like:

@media only screen and (max-device-width: 480px) {
      .sidebar { width: 100%; bottom: 0%; blahblah: something;  }
}

And that style would only be applied if the screen's width were less than 480px. This solution does not actually depend on bootstrap, but on CSS3.

By the way, if you included bootstrap.responsive.css (which is also given with bootstrap framework) your layout would automatically be made a one column layout, but maybe not in the order you wanted.

Answer 5

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 :

<div class="row-fluid">
    <div class="span9 pull-right">
        <!-- ... -->
    </div><!--/span-->
    <div class="span3 pull-left">
        <!-- ... -->
    </div><!--/span-->
</div><!--/row-->

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)

Answer 6

#wrapper {
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
}

#wrapper > div {
    width: 100%;
}

#header {
    order: 1;
    -webkit-order: 1;
}

#mainMenu {
    order: 2;
    -webkit-order:2;
}

#content {
    order: 3;
   -webkit-order:3;
}

#sidebar {
    order: 4;
    -webkit-order:4;
}

Source: http://www.reddit.com/r/css/comments/1v1gv7/change_order_of_divs_with_css/