title: How to change Bootstrap Grid with media queries?
body: <p>Ok, so I am trying to work out the best way to deal with removing content when resizing the screen using media queries. However, I am using the Twitter Bootstrap grid system and it is making it a bit tricky so I would appreciate some pointers.</p>
  
  <p>Lets say I have the following basic grid:-</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div id="left-content" class="span6"&gt;
              Left Content
          &lt;/div&gt;
          &lt;div id="right-content" class="span6"&gt;
              Right Content
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to use css media queries so that when the screen width is reduced to a certain size then I want to hide the <code>#right-content</code> which is straight forward like so:-</p>
  
  <pre><code>@media screen and (max-width: 800px) {
      #right-content {
          display:none;
      }
  }
  </code></pre>
  
  <p>However, I really need to update the class on <code>#left-content</code> from <code>span6</code> to <code>span12</code> so that the content is as wide as the screen. I can obviously do this with JavaScript but can this be done with pure css?</p>