How to change Bootstrap Grid with media queries?

Question

Ok, so I am trying to work out the best way to deal with removing content when resizing the screen using media queries. However, I am using the Twitter Bootstrap grid system and it is making it a bit tricky so I would appreciate some pointers.

Lets say I have the following basic grid:-

<div class="container-fluid">
    <div class="row-fluid">
        <div id="left-content" class="span6">
            Left Content
        </div>
        <div id="right-content" class="span6">
            Right Content
        </div>
    </div>
</div>

I want to use css media queries so that when the screen width is reduced to a certain size then I want to hide the #right-content which is straight forward like so:-

@media screen and (max-width: 800px) {
    #right-content {
        display:none;
    }
}

However, I really need to update the class on #left-content from span6 to span12 so that the content is as wide as the screen. I can obviously do this with JavaScript but can this be done with pure css?

Answer 1

Bootstrap 3.0 has additional grid classes that you can use: .col-sm-12 and .col-md-6 should work for you. See http://getbootstrap.com/css/#grid-options

Your right column can simply use the classes: .hidden-xs .hidden-sm (http://getbootstrap.com/css/#responsive-utilities)

<div class="row">
    <div id="left-content" class="col-sm-12 col-md-6">
        Left Content
    </div>
    <div id="right-content" class="hidden-xs hidden-sm col-md-6">
        Right Content
    </div>
</div>

Answer 2

You might want to upgrade to Bootstrap 3.0. Lots of improvements were made.

From the 3.0 docs, here are the responsive utilities that do exactly what you need.

http://getbootstrap.com/css/#responsive-utilities

And making a column fill the width of the screen at small sizes is as simple as adding the class col-md-6 to your div. Check out the 3.0 docs for the grid system.