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

If using bootstrap 2.2.1 you can:

Change the html to:

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

Now add this to your css overrides:

@media (min-width: 768px) and (max-width: 979px) 
{
    [class*="span"],
    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
    }
}

This will also work for any other span widths you have specified in your html.

the effect of these changes makes all span widths 100% causing the iPad to always use 1 column fluid mode in portrait mode.

Answer 2

This would be the best option to keep it dynamic. In my example I have width set to 6 columns next to fluidGridColumnWidth

[class*="span"]  {
    width: 100%;

    .row-fluid {
        [class*="span"] {
            width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5 / @gridRowWidth * 100 * 1%);

            float: left;
            margin-left: @fluidGridGutterWidth;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}