Re-spanning bootstrap columns

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;

   }

}