Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Supongamos que tenemos un diseño simple con dos columnas. Queremos que las columnas se
distribuyan 25% / 75% para los dispositivos pequeños.
Para dispositivos pequeños usaremos las clases .col-sm-*:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Para un diseño 25% / 75% en dispositivos pequeños, medianos, grandes y muy grandes se
utilizará .col-sm-3 y .col-sm-9 en (y para dispositivos muy pequeños se apilarán):
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Para una disposición de 33,3% / 66,6%, se utilizaría .col-sm-4 y .col-sm-8 (y por un / 50% de
fracción de 50%, se utilizaría .col-sm-6 y .col-sm-6):
<!-- 2 columns: 50% de ancho en todos los dispositivo, menos en muy pequeños
(100% ancho) -->
<div class="row">
<div class="col-sm">1 de 2</div>
<div class="col-sm">2 de 2</div>
</div>
<!-- 4 columns: 25% de ancho en todos los dispositivo, menos en muy pequeños
(100% ancho) -->
<div class="row">
<div class="col-sm">1 de 4</div>
<div class="col-sm">2 de 4</div>
<div class="col-sm">3 de 4</div>
<div class="col-sm">4 de 4</div>
</div>