bootstrap 4 utilitários responsivos visíveis / ocultos xs sm lg não funcionando

Tendo um problema com os novos utilitários responsivos classes ocultas / visíveis , ao migrar para o Bootstrap 4 . Estou ciente de que as classes .hidden foram removidas da v3 e substituídas por .hidden-*-up .hidden-*-down. Usando as novas .hidden-*-up.hidden-*-downclasses, mas os elementos não estão mudando para visíveis / ocultos. Não consigo descobrir por quê.

<div class="col hidden-xs-down">
    <span class="vcard">
        …
    </span>
</div>
<div class="col hidden-lg-down">
    <div class="hidden-sm-down">
                …
    </div>
    <div class="hidden-xs-down">
                …
    </div>
</div>

* nada está oculto neste exemplo, independentemente do tamanho da tela (Safari, Modo de Design Responsivo)

Com o Bootstrap 4, as .hidden-* classes foram completamente removidas (sim, elas foram substituídas, hidden-*-*mas essas classes também foram retiradas dos alfas v4).

Começando com a v4-beta, você pode combinar .d-*-nonee .d-*-blockclasses para obter o mesmo resultado.

visible- * também foi removido ; em vez de usar .visible-*classes explícitas , torne o elemento visível não ocultando-o (novamente, use combinações de .d-none .d-md-block). Aqui está o exemplo de trabalho:

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs"torna-se class="d-none d-sm-block"(ou d-none d-sm-inline-block ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

Um exemplo de utilitários responsivos Bootstrap 4 :

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

• codepen.io/_yatko/pen/ZJXQxy

Documentação

Classe de tamanho da tela

-

1. Oculto em todos .d-nenhum

2. Oculto apenas em xs .d-none .d-sm-block

3. Oculto apenas em sm .d-sm-none .d-md-block

4. Oculto apenas em md .d-md-none .d-lg-block

5. Oculto apenas em lg .d-lg-none .d-xl-block

6. Oculto apenas em xl .d-xl-none

7. Visível em todos os blocos .d

8. Visível apenas em xs .d-block .d-sm-none

9. Visível apenas em sm .d-none .d-sm-block .d-md-none

10. Visível apenas em md .d-none .d-md-block .d-lg-none

11. Visível apenas em lg .d-none .d-lg-block .d-xl-none

12. Visível apenas em xl .d-none .d-xl-block

Consulte este link http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

4.5 link: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

Bootstrap 4 (^ beta) mudou as classes para ocultar / mostrar elementos responsivos. Veja este link para as classes corretas a serem usadas: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Alguma versão funcionando

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>