Visibilidad

Para lograr un progreso más veloz y una experiencia móvil más agradable, emplee clases de visualización adaptable para exhibir u ocultar elementos según el dispositivo. Evite generar múltiples versiones del sitio, optando en su lugar por la ocultación selectiva de elementos según el tamaño de pantalla.

.hide

Clase Descripción
.hide (>992px). El elemento se oculta visualmente en la página para todas las resoluciones.
.hide-m (>576px y <992px). El elemento se oculta visualmente en la página para resoluciones entre 576px y 992px.
.hide-s (<576px). El elemento se oculta visualmente en la página para resoluciones inferiores a 576px.

.show

Clase Descripción
.show El elemento se muestra visualmente en la página para todas las resoluciones.
.show-m (>576px y <992px). El elemento se muestra visualmente en la página para resoluciones entre 576px y 992px.
.show-s (<576px). El elemento se muestra visualmente en la página para resoluciones inferiores a 576px.

Visible y Oculto

El elemento N° 1 solo será visible en resoluciones de tamaño mediano (>576px y <992px).
N° 1
El elemento solo será visible en resoluciones de tamaño mediano (>576px y <992px).
N° 2
El elemento se ocultara para tamaños medianos (>576px y <992px).
N° 3
El elemento se ocultara para tamaños pequeños (<576px).
HTML 
                                    
    <div class="hide show-m">N° 1 - El elemento solo será visible en resoluciones de tamaño mediano (>576px y <992px).</div>   
    <div class="hide-m">N° 2 - El elemento se ocultara para tamaños medianos (>576px y <992px).</div>
    <div class="hide-s">N° 3 - El elemento se ocultara para tamaños pequeños (<576px).</div>