Una funcionalidad muy útil en Bootstrap 4 es la de ocultar elementos, en este caso vamos a ver las columnas.

Para ver como funciona vamos a crear nuestro pequeño código para la distribución en rejilla.

<div class="container">
    <div class="row">
        <div class="col-md-3 col-lg-3"></div>
        <div class="col-md-3 col-lg-2"></div>
        <div class="col-md-3 col-lg-5"></div>
        <div class="col-md-3 col-lg-2"></div>
    </div>
</div>

Que nos daría el siguiente resultado:

Ahora imaginemos que queremos hacer desaparecer alguna sección en alguno de los puntos de corte de tamaño de pantalla.

Para ello, bootstrap 4, dispone de una serie de clases que nos ayudan enormemente:

• d-none: hace que el elemento desaparezca en todos los tamaños de pantalla, aunque se suele usar muy poco, ya que generalmente lo interesante está en que se vea en unos tamaños de pantalla y en otros no.
• d-[tamaño]-none: en este caso le estamos diciendo a boostrap 4, que en el tamaño especificado no se vea ese elemento, y el tamaño corresponde a: xs, sm, md, lg, xl

El mismo elemento puede tener varias clases d-[tamaño]-none donde desaparecería, esto nos llevaría a tener que organizar nuestra rejilla para los elementos que  si están visibles y que ocupen todo el grid.

De esta forma podemos dejar nuestro código así:

<div class="container">
	<div class="row">
		<div class="d-none d-md-block col-md-3 col-lg-6"></div>
		<div class="col-xs-12 col-sm-1 col-md-3 col-lg-6"></div>
		<div class="col-xs-12 col-sm-4 col-md-3 d-lg-none"></div>
		<div class="col-xs-12 col-sm-4 col-md-3 d-lg-none"></div>
	</div>
</div>

Lo cual nos da el siguiente resultado:

Hay que tener en cuenta que aquí solo estamos trabajando con el tamaño de pantalla lg, pero podemos trabajar con el/los que queramos.

Bootstrap 4 funciona leyendo de pantalla más pequeña a mas grande (mobile first), por lo que si eliminamos una columna en un tamaño de pantalla se verán afectados los mayores, por lo que disponemos de dos clases:

• d-[tamaño]-block: lo cual le dice a boostrap 4, que a partir de ese tamaño sí muestre la columna,
• d-[tamaño]-inline: que le dice a bootstrap 4, que a partir de se tamaño muestre la columna como una línea.

Analizando el código que tenemos, le estamos diciendo que :

• la primera columna no se muestre, pero en tamaños sm o o superiores que sí lo haga.
• la tercera y cuarta columna no se muestren en tamaños lg y superiores.