Bootstrap, making responsive changes to layout

Question

I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8"></div>    
</div>

What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?

Answer 1

With bootstrap 2.0.2 and up you can:

Change the html to:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>

(I interpreted 'smaller' with tablet and phone sizes, use your own definitions for other sizes)

.hidden-phone and .hidden-tablet hide the span4 for smaller screens.

To reclaim that space and re-span the span8, add this to your css:

@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}

If you happen to be using less you can use bootstrap's grid mixins:

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}