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 would work for many sites, but I actually want the sidebar at the bottom on small width layouts.

I’m brand new to Twitter Bootstrap and tried to figure out what part of the CSS in bootstrap-response.css, but I didn’t see anything in the section for @media (max-width: 480px).

I looked at the Bootstrap documentation for the responsive design and there isn’t much detail on it.

Would love some pointers…

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:

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