bootstrap 4 responsive utilities visible / hidden xs sm lg no funciona

Tener un problema con las clases ocultas / visibles de las nuevas utilidades receptivas al migrar a Bootstrap 4 . Soy consciente de que las clases .hidden- se han eliminado de v3 y se han reemplazado con .hidden-*-up .hidden-*-down. Usando las nuevas .hidden-*-up.hidden-*-downclases pero los elementos no cambian a visibles / ocultos. No puedo entender 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>

* no hay nada oculto en este ejemplo, independientemente del tamaño de la pantalla (Safari, modo de diseño adaptable)

Con Bootstrap 4, las .hidden-* clases se eliminaron por completo (sí, fueron reemplazadas por, hidden-*-*pero esas clases también desaparecieron de las versiones alfa v4).

Comenzando con v4-beta, puede combinar clases .d-*-noney .d-*-blockpara lograr el mismo resultado.

visible- * también se eliminó ; en lugar de usar .visible-*clases explícitas , haga visible el elemento sin ocultarlo (nuevamente, use combinaciones de .d-none .d-md-block). Aquí está el ejemplo de trabajo:

<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"se convierte en class="d-none d-sm-block"(o 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>

Un ejemplo de utilidades de respuesta de 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

Documentación

Clase de tamaño de pantalla

-

1. Oculto en todo .d-none

2. Oculto solo en xs .d-none .d-sm-block

3. Oculto solo en sm .d-sm-none .d-md-block

4. Oculto solo en md .d-md-none .d-lg-block

5. Oculto solo en lg .d-lg-none .d-xl-block

6. Oculto solo en xl .d-xl-none

7. Visible en todos los bloques .d

8. Visible solo en xs .d-block .d-sm-none

9. Visible solo en sm .d-none .d-sm-block .d-md-none

10. Visible solo en md .d-none .d-md-block .d-lg-none

11. Visible solo en lg .d-none .d-lg-block .d-xl-none

12. Visible solo en xl .d-none .d-xl-block

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

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

Bootstrap 4 (^ beta) ha cambiado las clases para ocultar / mostrar elementos sensibles. Consulte este enlace para conocer las clases correctas para usar: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Alguna versión funcionando

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