[Bootstrap4 Display property] Como alternar entre exibir e ocultar em sites responsivos

Ao criar um site responsivo com o sistema de grade Bootstrap4, resumi o método de alternância a ser exibido ou oculto, dependendo da largura. Espero que ajude você com o layout.

Lista de métodos de alternância de exibição / ocultação

A seguir, descreve o elemento do [block]. Mude conforme necessário.

xs : 576px-

 
 
 
 
 

Código

<div class="d-block d-sm-none">【A】</div>
<div class="d-none d-sm-block">【B】</div>

Exemplo

 A 
 B 

sm : 768px –

 
 
 
 
 

Código

<div class="d-block d-md-none">【A】</div>
<div class="d-none d-md-block">【B】</div>

Exemplo

 A 
 B 

md : 992px –

 
 
 
 
 

Código

<div class="d-block d-lg-none">【A】</div>
<div class="d-none d-lg-block">【B】</div>

Exemplo

 A 
 B 

lg : 1200px –

 
 
 
 
 

Código

<div class="d-block d-xl-none">【A】</div>
<div class="d-none d-xl-block">【B】</div>

Exemplo

 A 
 B 

Somente [sm](576px – 768px)

 
 
 
 
 

Código

<div class="d-none d-sm-block d-md-none">【A】</div>
<div class="d-sm-none d-md-block">【B】</div>

Exemplo

 A 
 B 

Somente [md] (768px – 992px)

 
 
 
 
 

Código

<div class="d-none d-md-block d-lg-none">【A】</div>
<div class="d-md-none d-lg-block">【B】</div>

Exemplo

 A 
 B 

Somente [lg] (992px – 1200px)

 
 
 
 
 

Código

<div class="d-none d-lg-block d-xl-none">【A】</div>
<div class="d-lg-none d-xl-block">【B】</div>

Exemplo

 A 
 B 

Site de referência

Artigo relacionado