Twitter Bootstrap 2: How to get responsive design to place sidebar on the bottom instead of top?

Question

Twitter\'s Bootstrap 2 finally added native responsive design. However, by default when the browser width is below a min width, it places the sidebar on top. I can see how this

Answer 1

No an optimized solution, but here is how I did it:

<script type="text/javascript">
$(window).resize(function() {
    if ( $(window).width() < 768 ) {
        $(".sidebar").insertAfter(".main");
    }
    else{
        $(".main").insertAfter(".sidebar");
    }
});

$(document).ready(function(){
    if ( $(window).width() < 768 ) {
        $(".sidebar").insertAfter(".main");
    }
});
</script>

Answer 2

It might be easy.

// Pull right sidebar to top
<div class="row">
  <div class="span3 pull-right">Right sidebar</div>
  <div class="span9">Content section</div>
</div>

// Or pull left sidebar to bottom side
<div class="row">
  <div class="span9 pull-right">Content section</div>
  <div class="span3">Left Sidebar</div>
</div>

Answer 3

You can achieve this effect by flipping the containers for the sidebar and content area and just floating them the way you want to. This can be done cleanly without messing around too much with the bootstrap stylesheet by assigning your own ids to the sidebar and content area and doing something like this:

CSS

.sidebar-nav {
    padding: 9px 0;
    width:100%;
}

#sidebar {
    float:left;
    margin-left:0;
}

#content {
    float:right !important;
    margin-left:auto;
}

@media (max-width: 767px) {
    #sidebar {
        display: inline-block;
        margin-top: 20px;
        width: 100%;
    }

    #content {
        float:none !important;
        margin-left:0;
    }
}

Then all you have to do is flip the container divs like so:

<div id="content" class="span9"> ... </div> /* item you want up top first */
<div id="sidebar" class="span3"> ... </div> /* last item to be rendered below */

Demo: http://jsfiddle.net/andresilich/YEUwN/1/show/ Edit here: http://jsfiddle.net/andresilich/YEUwN/1/

Answer 4

This is for Andres Ilich who answered this question. I do not see a way to make a comment above or to contact him directly. So I apologize to the moderators.

To make this thread more helpful I would like to know what is meant by "Then all you have to do is flip the container divs like so:" How do the container divs get flipped? The code demo/edit is still not clear to someone like me who is not real familiar with that technique. I can't figure out what it is doing and how it works. It almost looks like some javascript is acting on it. Ideally, there would a bare bones example with only two divs and minimal css pointing out on which css line(s) the "flip" takes place.

If anyone has the time to elaborate, I would greatly appreciate it.

Answer 5

I created a grid "extension" to allow source ordering for fluid grids - it could be optimized but it does the job. Just use col-pull-# & col-push-# (where # is the number of columns you want to pull/push). Also to override the margin for the first element add a class of first to the element that you want to appear first in the row. See the demo and get the HTML/CSS/LESS here:

http://jsfiddle.net/NGuL2/3/embedded/result/