hide column in bootstrap on mobile phone

Question

I have a site with 2 columns and i want to hide one of the columns when the site is viewed on a mobile. I know you can use the hidden_phone class and set the column class to 99% or whatever it is using a screen size media query but im wondering if this is the correct way of doing it. Is there a better way or a more correct way

<div class="container>  <div class="row">   <div class="span8">some content</div>   <div class="span4 hidden-phone">some content</div>  </div> </div>   @media (max-width: someresolution){  .span8{   width:99.3214534%;  } } 

Answer 1

Yes, this is actually the approach twitter bootstrap uses. Have a look at the source code of their grid system.

The hidden-phone, ... classes (these have been renamed to hidden-xs, .. in version 3) work by just setting the "display" attribute to "none" or "block" depending on the current media query. Have a look at their responsive-utilities and mixins and look for the text 'responsive-visibility' if you want the full details.

While this is 'less' and not 'css', it should be readable. If you're curious what 'less' is, visit the website at lesscss.org