Escolar Documentos
Profissional Documentos
Cultura Documentos
En el capítulo anterior, presentamos un ejemplo de grid con las clases para dispositivos pequeños
medianos. Se han utilizado dos divs (columnas) y les dimos un 25% / 75% en dispositivos
pequeños y 50% / 50% en dispositivos medianos
Pero en los dispositivos grandes el diseño puede ser mejor como una relación 33% / 66%.
Un dispositivo grande es aquel que su resolución está entre 992 a 1199 pixeles.
Para los dispositivos grandes usaremos las clases .col-lg-*:
El siguiente ejemplo se traducirá en un diseño 25% / 75% en dispositivos pequeños y 50% / 50%
en dispositivos medianas, grandes y muy grandes. En los dispositivos muy pequeños, se apilarán
de forma automática (100% de ancho):
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>