How to change Bootstrap grid using media queries?

Question

Ok, so I'm trying to develop a better way to handle content deletion when changing screen size using media queries. However, I use the Twitter Bootstrap grid, and this makes it a little complicated, so I will be grateful to some pointers.

Suppose I have the following base 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 requests, so when the screen width is reduced to a certain size, I want to hide #right-content , which directly looks like this: -

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

However, I really need to upgrade the class to #left-content from span6 to span12 so that the content is as wide as the screen. I can obviously do this using JavaScript, but is it possible to do this 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

In the right column, you 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. Many improvements have been made.

The 3.0 documents provide flexible utilities that do exactly what you need.

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

And creating a column fills the screen width in small sizes is as simple as adding the col-md-6 class to your div. Check out the 3.0 docs for the grid.