title: bootstrap.css - How to hide sidebar when mobile?
body: <p>i am trying to realize a layout with bootstrap.css. It is especially a main view with a right sidebar. It looks great on the desktop, but i am trying to remove the sidebar when i have a mobile view. 
  Currently my layout looks like this:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
     &lt;div class="row-fluid"&gt;
        &lt;div class="span9"&gt;
           Main view goes here
        &lt;/div&gt;
        &lt;div class="span3 visible-desktop visible-tablet hidden-phone"&gt;
           Sidebar goes here
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So when i have a mobile view, the sidebar disappears. But the main view still has a span9 class, causing the whole view having some whitespace to the right. I am currently experiencing this on an iPhone 4 with mobile safari.</p>
  
  <p>I am no css guru and i mainly work on the backend of webapps, but this time i just want to do it right, because it is for my personal blog. You can check out what i mean with this "whitespace" at <a href="https://blog.simonszu.de" rel="nofollow">my blog</a>. I know that the navbar isn't pretty at all now, but this will be the next thing i'll fix.</p>