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

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:

 ... 
 /* item you want up top first */
 ... 
 /* last item to be rendered below */

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