15

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

2
  • There's no "special" css for the sidebar. All it is, is a list spanning 3 rows. Look at the code to fluid.html (located in the docs/examples folder. Feb 13, 2012 at 14:11
  • Curious, did you ever figure this out?
    – kmurph79
    Feb 17, 2012 at 9:04

5 Answers 5

25

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/

0
6

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>
1
  • I need to make few more css changes but this works. Thanks. Bootstrap 3 already has the column ordering. I am working on a project where I can't upgrade to Bootstrap 3 yet.
    – Sri
    Mar 10, 2015 at 7:41
0

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.

0

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/

-2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.