title: Twitter bootstrap hide element on small devices
body: <p>I have this code:</p>
  
  <pre><code>&lt;footer class="row"&gt;
    &lt;nav class="col-sm-3"&gt;
      &lt;ul class="list-unstyled"&gt;
        &lt;li&gt;Text 1&lt;/li&gt;
        &lt;li&gt;Text 2&lt;/li&gt;
        &lt;li&gt;Text 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;nav class="col-sm-3"&gt;
      &lt;ul class="list-unstyled"&gt;
        &lt;li&gt;Text 4&lt;/li&gt;
        &lt;li&gt;Text 5&lt;/li&gt;
        &lt;li&gt;Text 6&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;nav class="col-sm-3"&gt;
      &lt;ul class="list-unstyled"&gt;
        &lt;li&gt;Text 7&lt;/li&gt;
        &lt;li&gt;Text 8&lt;/li&gt;
        &lt;li&gt;Text 9&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;nav class="col-sm-3"&gt;
      &lt;ul class="list-unstyled"&gt;
        &lt;li&gt;Text 10&lt;/li&gt;
        &lt;li&gt;Text 11&lt;/li&gt;
        &lt;li&gt;Text 12&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>Four blocks with some texts inside. They are equal in width, I've set <code>col-sm-3</code> to all of them and what I want to do is to hide the last <code>nav</code> on extra small devices. I've tried to use <code>hidden-xs</code> on that <code>nav</code> and it hides it, but in the same time I want the other blocks to expand (change class from <code>col-sm-3</code> to <code>col-sm-4</code>) <code>col-sm-4 X 3 = 12</code>.</p>
  
  <p>Any solution?</p>