Mostrar código diferente em diversas resoluções
As vezes é necessário mostrar ou esconder um código diferente para algumas resoluções ou não mostrar.
Para esconder uma div em uma determinada resolção com o Boostrap 4 é simples, basta usar a propriedade display mostrada no código de exemplo abaixo, o qual a intenção é esconde a div para apenas as telas xs.
<div class="d-none d-sm-block">
<p>Não irei aparecer em telas xs</p>
</div>Se quiser saber mais sobre essa maravilha, segue a documentação em Português do Bootstrap 4 que fala tudo: https://getbootstrap.com.br/docs/4.1/utilities/display/
Outra forma de fazer isso é com as media queries do CSS, no exemplo abaixo quando a tela possuir uma largura menor que 600px, o fundo da página ficará verde.
@media only screen and (max-width: 600px) {
body {
background-color: green;
}
}Segue abaixo a fonte do exemplo acima e mais dois links de foruns respondendo dúvidas sobre esse assunto.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
http://www.codigosnaweb.com/forum/viewtopic.php?t=8824#p31226