17

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?

mrto2
  • 223
  • 1
  • 5
  • 13

6 Answers6

29

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

Shahzad Barkati
  • 2,532
  • 6
  • 25
  • 33
George Filippakos
  • 16,359
  • 15
  • 81
  • 92
  • 14
    How can you do this when the columns are full width? col-lg-12 col-lg-12 – shaunw Jan 03 '14 at 00:05
  • This is the right answer for 2014. V useful - thanks. – Alveoli Aug 08 '14 at 22:15
  • @shaunw You simply do it the other way around, mobile first if you like. You place it normally for xs (12 rows) but for larger desktops you pull/push how you need it. –  Feb 08 '16 at 11:39
21

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)

Sherbrow
  • 17,279
  • 3
  • 64
  • 77
  • Thanks for your reply. It served the purpose. But if we have another sidebar on right side of the hero unit then how can we show them with that order on desktop view? Because the "pull-right" on hero unit will pull the hero unit on extreme right side and the right sidebar on left but we want hero unit in middle and the right side bar on extreme right.....(http://jsfiddle.net/mrto2/YR2UM/) – mrto2 Oct 17 '12 at 03:50
  • @mrto2 If you put the second sidebar between both elements with a `.pull-right`, it should work. – Sherbrow Oct 17 '12 at 05:17
  • it is working but the center content is not coming in between them but it is coming after the right sidebar. There is a gap in between both of the sidebars. If we dont apply the pull-right then it works ok in desktop view but the left-sidebar comes on top........... – mrto2 Oct 17 '12 at 06:30
  • @mrto2 Indeed. I tried a bit and it doesn't sort out as desired. You should try nesting a `.row-fluid` which would contain the main content and the second navbar. – Sherbrow Oct 17 '12 at 14:09
  • Had to work with an old version of bootstrap and this was very useful. Thank you! – CunningFatalist Sep 02 '14 at 07:54
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"));
    }
});
hexist
  • 5,151
  • 26
  • 33
1
#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/

user956584
  • 5,316
  • 3
  • 40
  • 50
0

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

rb-
  • 2,315
  • 29
  • 41
-1

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.

bvaldivielso
  • 139
  • 6
  • Thanks bvaldivielso for reply. Actually I am already using media queries in different mobile views but I want to show the top content on bottom in mobile view. For example, Most of the time, a side bar on left side of any fluid page should come after the main content in mobile view (but by default it comes before the main content)so we have to place/re-arrange/re-order that sidebar under that content in mobile views. but when we work for desktop view, it comes before the main content in Fluid-Row.....So I am looking for someone's expert views for this...... – mrto2 Oct 15 '12 at 21:41