Bootstrap 4: classi visible e hidden

Sto migrando un sito da Bootstrap 3 a Bootstrap 4, che fornisce anche una pagina apposita per facilitare la migrazione.

Ci sono comunque alcune cose un pò oscure.

Una di queste riguarda le classi visible e hidden, che in sostanza si occupano di rendere visibile / nascondere dei componenti solo a determinate risoluzioni.

Se volessimo fare una sorta di tabella comparativa:

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down = d-none
hidden-xs-up = d-none
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none
hidden-xs (only) = d-none d-sm-block
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

Quindi, io volevo nascondere un componente nel caso di risoluzioni xs.

Partendo dal presupposto che adesso xs è il breakpoint di default:

<span class="hidden-xs">DA NASCONDERE</span> --> VERSIONE 3
<span class="d-none d-sm-block">DA NASCONDERE</span> --> VERSIONE 4

E comunque, questa migrazione, su un sito di grandi dimensioni è un bagnodi sangue!

Enjoy!