Twitter bootstrap ocultar elemento en dispositivos pequeños

Tengo este codigo:

<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>

Cuatro cuadras con algunos textos adentro. Tienen el mismo ancho, los he configurado col-sm-3para todos y lo que quiero hacer es ocultar el último naven dispositivos extra pequeños. Intenté usar hidden-xseso navy lo oculta, pero al mismo tiempo quiero que los otros bloques se expandan (cambie la clase de col-sm-3a col-sm-4) col-sm-4 X 3 = 12.

¿Alguna solución?

En dispositivo pequeño: 4 columns x 3 (= 12) ==> col-sm-3

En extra pequeño: 3 columns x 4 (= 12) ==> col-xs-4

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

Como dices, hidden-xs no es suficiente, tienes que combinar la clase xs y sm.

Aquí hay enlaces al documento oficial sobre las clases receptivas disponibles y sobre el sistema de cuadrícula .

Tener en cabeza:

• 1 fila = 12 columnas
• Para el dispositivo de centro comercial X tra S : col-xs -__
  
• Para todos los dispositivos SM : col-sm -__
  
• Para dispositivo M e D ium : col-md -__
  
• Para dispositivo L ar G e : col-lg -__
  
• Hacer visible solo (oculto en otro): visible-md (solo visible en medio [no en lg xs o sm])
• Hacer oculto solo (visible en otro): hidden-xs (solo oculto en XtraSmall)

Bootstrap 4

Las clases de visualización (ocultas / visibles) se cambian en Bootstrap 4. Para ocultarse en la xsventana gráfica, utilice:

d-none d-sm-block

Vea también: Falta visible - ** y oculta - ** en Bootstrap v4

Bootstrap 3 (respuesta original)

Utilice la hidden-xsclase de utilidad.

<nav class="col-sm-3 hidden-xs">
        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>
</nav>

http://bootply.com/90722

Para Bootstrap 4.0 hay un cambio

Consulte los documentos: https://getbootstrap.com/docs/4.0/utilities/display/

Para ocultar el contenido en el móvil y mostrarlo en los dispositivos más grandes, debe usar las siguientes clases:

d-none d-sm-block

El conjunto de primera clase no muestra ninguno en todos los dispositivos y el segundo lo muestra para dispositivos "sm" up (puede usar md, lg, etc. en lugar de sm si desea mostrar en diferentes dispositivos.

Sugiero leer sobre eso antes de la migración:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

<div class="small hidden-xs">
    Some Content Here
</div>

Esto también funciona para elementos que no se usan necesariamente en una cuadrícula / columna pequeña. Cuando se representa en pantallas más grandes, el tamaño de fuente será menor que el tamaño de fuente de texto predeterminado.

Esta respuesta satisface la pregunta en el título del OP (que es cómo encontré esta Q / A).