Mélanger les classes
On a vu les 4 types de classes disponibles pour créer des colonnes :
| Petit écran (smartphone) | Ecran réduit (tablette) | Ecran moyen (desktop) | Grand écran (desktop) | |
|---|---|---|---|---|
| Valeur de référence | < 768 px | > 768 px | > 992 px | > 1200 px |
| Classes | .col-xs-* | .col-sm-* | col-md-* | col-lg-* |
 |
 |
 |
 |
On a des colonnes accolées au-dessus de la valeur de référence et un empilement en-dessous. Mais il y a des fois où on désire un comportement un peu plus complexe. Par exemple 4 zones de 3 colonnes accolées pour les écrans moyens et au-dessus et 2 zones de 6 colonnes accolées au-dessous. Pour réaliser cela il suffit d'utiliser plusieurs classes. Voici comment faire :
3 colonnes sur grand écran
.col-md-3
3 colonnes sur écran moyen.col-md-3
6 colonnes sur tablette.col-xs-6
6 colonnes sur smartphone.col-xs-6
3 colonnes sur grand écran
.col-md-3
3 colonnes sur écran moyen.col-md-3
6 colonnes sur tablette.col-xs-6
6 colonnes sur smartphone.col-xs-6
3 colonnes sur grand écran
.col-md-3
3 colonnes sur écran moyen.col-md-3
6 colonnes sur tablette.col-xs-6
6 colonnes sur smartphone.col-xs-6
3 colonnes sur grand écran
.col-md-3
3 colonnes sur écran moyen.col-md-3
6 colonnes sur tablette.col-xs-6
6 colonnes sur smartphone.col-xs-6
Modifiez la largeur de votre affichage pour voir l'effet.
Le code correspondant est celui-ci :
<div class="row"> <div class="col-xs-6 col-md-3"> ... </div> <div class="col-xs-6 col-md-3"> ... </div> <div class="col-xs-6 col-md-3"> ... </div> <div class="col-xs-6 col-md-3"> ... </div> </div>
On peut être plus précis en prévoyant un comportement spécifique pour chaque support :
- 1 colonne par cellule pour grand écran
- 2 colonnes par cellule pour écran moyen
- 4 colonnes par cellule pour tablette
- 6 colonnes par cellule pour smartphone
Voici ce que ça donne :
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
1 colonne sur grand écran
.col-lg-1
2 colonnes sur écran moyen.col-md-2
4 colonnes sur tablette.col-sm-4
6 colonnes sur smartphone.col-xs-6
Modifiez la largeur de votre affichage pour voir l'effet.
Le code correspondant est celui-ci :
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">...</div>
</div>