Elemento de ocultação de bootstrap do Twitter em dispositivos pequenos

Eu tenho este código:

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

Quatro blocos com alguns textos dentro. Eles são iguais em largura, eu configurei col-sm-3para todos eles e o que eu quero fazer é esconder o último navem dispositivos extra pequenos. Eu tentei usar hidden-xsnisso nave esconde, mas ao mesmo tempo quero que os outros blocos se expandam (mude de classe de col-sm-3para col-sm-4) col-sm-4 X 3 = 12.

Qualquer solução?

Em dispositivo pequeno: 4 columns x 3 (= 12) ==> col-sm-3

Extra pequeno: 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 você disse, hidden-xs não é suficiente, você deve combinar as classes xs e sm.

Aqui estão os links para o documento oficial sobre as classes responsivas disponíveis e sobre o sistema de grade .

Tenha em mente:

• 1 linha = 12 cols
• Para dispositivo X tra S mall : col-xs -__
  
• Para SM todos os dispositivos : col-sm -__
  
• Para dispositivo M e D ium : col-md -__
  
• Para dispositivo L ar G e : col-lg -__
  
• Tornar visível apenas (oculto em outro): visible-md (apenas visível no meio [não em lg xs ou sm])
• Tornar oculto apenas (visível em outro): hidden-xs (apenas oculto no XtraSmall)

Bootstrap 4

As classes de exibição (ocultas / visíveis) são alteradas no Bootstrap 4. Para se ocultar na xsjanela de visualização, use:

d-none d-sm-block

Veja também: Visível ausente - ** e oculto - ** no Bootstrap v4

Bootstrap 3 (resposta original)

Use a hidden-xsclasse de utilitário.

<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, há uma mudança

Veja os documentos: https://getbootstrap.com/docs/4.0/utilities/display/

Para ocultar o conteúdo no celular e exibi-lo em aparelhos maiores, você deve usar as seguintes classes:

d-none d-sm-block

O conjunto da primeira classe não exibe nenhum em todos os dispositivos e o segundo exibe para dispositivos "sm" up (você pode usar md, lg, etc. em vez de sm se quiser mostrar em dispositivos diferentes.

Sugiro ler sobre isso antes da migração:

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

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

Isso também funciona para elementos não necessariamente usados ​​em uma grade / coluna pequena. Quando ele é renderizado em telas maiores, o tamanho da fonte será menor do que o tamanho da fonte do texto padrão.

Essa resposta atende à pergunta do título do OP (que foi como encontrei esta P / A).