Bootstrap has a few utility classes for responsive design. Among those .hidden-tablet and .hidden-phone. While the documentation warns to use 'on a limited basis', they can be used for various creative purposes. One is in combination with the fluid grid.
Consider a grid like:
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
How can you hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?
With bootstrap 2.0.2 we can use the .hidden-phone and .hidden-tablet utility classes to hide the span4 for smaller screens:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8 span12-tablet"></div>
</div>
Add a class span12-tablet next to the span8. Then add css to reclaim the space that was left by hiding the span4:
@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;
}
}