Elemento nascondi bootstrap Twitter su piccoli dispositivi

Ho questo codice:

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

Quattro blocchi con alcuni testi all'interno. Sono uguali in larghezza, li ho impostati col-sm-3tutti e quello che voglio fare è nascondere l'ultimo navsu dispositivi extra piccoli. Ho provato a usarlo hidden-xssu quello nave lo nasconde, ma allo stesso tempo voglio che gli altri blocchi si espandano (cambia classe da col-sm-3a col-sm-4) col-sm-4 X 3 = 12.

Qualche soluzione?

Su un piccolo dispositivo: 4 columns x 3 (= 12) ==> col-sm-3

Su extra piccolo: 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>

Come dici tu, hidden-xs non è sufficiente, devi combinare xs e sm class.

Ecco i collegamenti al documento ufficiale sulle classi reattive disponibili e sul sistema a griglia .

Avere in testa:

• 1 riga = 12 col
• Per dispositivo X tra S mall : col-xs -__
  
• Per tutti i dispositivi SM : col-sm -__
  
• Per dispositivo M e D ium : col-md -__
  
• Per dispositivo L ar G e : col-lg -__
  
• Rendi visibile solo (nascosto su altro): visible-md (solo visibile in mezzo [non in lg xs o sm])
• Rendi solo nascosto (visibile su altro): hidden-xs (appena nascosto in XtraSmall)

Bootstrap 4

Le classi di visualizzazione (nascoste / visibili) vengono modificate in Bootstrap 4. Per nascondere nella xsfinestra utilizzare:

d-none d-sm-block

Vedi anche: Mancante visibile - ** e nascosto - ** in Bootstrap v4

Bootstrap 3 (risposta originale)

Usa la hidden-xsclasse di utilità ..

<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

Per Bootstrap 4.0 c'è una modifica

Consulta i documenti: https://getbootstrap.com/docs/4.0/utilities/display/

Per nascondere il contenuto sui dispositivi mobili e visualizzarlo sui dispositivi più grandi è necessario utilizzare le seguenti classi:

d-none d-sm-block

Il primo set di classi non mostra nessuno su tutti i dispositivi e il secondo lo mostra per i dispositivi "sm" su (puoi usare md, lg, ecc. Invece di sm se vuoi mostrare su dispositivi diversi.

Suggerisco di leggerlo prima della migrazione:

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

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

Questo funziona anche per elementi non necessariamente usati in una griglia / piccola colonna. Quando viene visualizzato su schermi più grandi, la dimensione del carattere sarà inferiore alla dimensione del carattere del testo predefinita.

Questa risposta soddisfa la domanda nel titolo OP (che è come ho trovato questa domanda / risposta).