Twitter bootstrap cacher élément sur de petits appareils

J'ai ce code:

<footer class="row">
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 4</li>
      <li>Text 5</li>
      <li>Text 6</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 7</li>
      <li>Text 8</li>
      <li>Text 9</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 10</li>
      <li>Text 11</li>
      <li>Text 12</li>
    </ul>
  </nav>
</footer>

Quatre blocs avec certains textes à l'intérieur. Ils sont égaux en largeur, j'ai mis en col-sm-3 à chacun d'eux et ce que je veux faire est de cacher la dernière nav sur le plus petit des appareils. J'ai essayé d'utiliser hidden-xs sur que nav et il le cache, mais en même temps je veux que les autres blocs à développer (changement de classe de col-sm-3 à col-sm-4) col-sm-4 X 3 = 12.

Toute solution?