Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:
- larghe 6 per tutti gli schermi.