Nous allons voir dans cette leçon comment changer l’ordre d’apparition des colonnes sur une grille conçue avec Bootstrap 5.
Cela peut s’avérer très utile notamment lorsqu’on change de taille d’écran et que les colonnes ne positionnent plus les unes a cotes de autres mais les unes en dessous des autres.
Ce cours fait suite aux deux leçons précédentes :
Pour notre exemple nous allons utiliser:
- 2 colonnes, respectivement de 3 et 9 colonnes de large,
- Un point de transition de 768px créer avec la classe .md (en dessous de 768px les colonnes vont se positionner les unes en dessous des autres).
- La première colonne indiquera l’auteur de l’article.
- La deuxième colonne contiendra le contenu de l’article.
Si ce positionnement est tout à fait compréhensible lorsque les colonnes sont alignées horizontalement, cela devient moins compréhensible lorsqu’elles sont alignées verticalement.
Rétrécissons la taille de l’écran pour voir.
On voit que l’auteur apparaît avant l’article ce qui n’est pas forcément ce que l’on veut. On pourrait préférer afficher d’abord l’article et ensuite son auteur lorsque l’on passe sous une résolution de 768px.
Pour ce faire, nous allons utiliser la classe .order qui va nous permettre de modifier l’ordre d’apparition des colonnes.
Puisqu’il y a 12 colonnes sur une grille Bootstrap 5 et qu’il est donc potentiellement possible d’avoir 12 colonnes contenant des éléments (contenus). La classe .order va donc s’accompagner d’un nombre allant de 1 à 12.
Exemple : col-md-4 .order-9 signifie que l’on souhaite placer cette colonne en 9 positions sur l’ordre d’apparition des colonnes.
Toujours en réduisant l’écran (vous allez comprendre pourquoi ensuite) nous allons faire passer notre colonne 1 en deuxième position et notre colonne 2 en première position.
En position verticale, on obtient ce que l’on veut, c’est parfait, mais que se passe-t-il lorsqu’on agrandit l’écran pour obtenir un positionnement horizontal des colonnes ?
L’ordre de position persiste, or ce n’est pas ce que nous voulons.
Alors, comment faire pour que la colonne 1 (auteur) se positionne en premier sur une résolution supérieure ou égale à 768px (colonnes cote à côté) et en second sur une résolution inférieure à 768px (colonnes les unes en dessous des autres).
C’est très simple on va rajouter les célèbres Breakpoints.
Pour notre exemple, on va continuer avec le Breakpoint .md (point de position >=768px).
On va dire à Bootstrap:
Tant que l’on est au-dessus de 768px place :
- La colonne 1 en position 1 : order-md-1
- La colonne 2 en position 2 : order-md-2
Lorsqu’on est en dessous de 768px place :
La colonne 1 en position 2 : order-md-1 order-2
La colonne 2 en position 2 : order-md-2 order-1
Au-dessus de 768px (.md) :
En dessous de 768px :
Voyons d’autres exemples :
Nous allons créer 6 colonnes de 2 colonnes avec un Breakpoint de 576px, classe .sm, à cette taille d’écran les colonnes sont ordonnées de façon classique, c’est-à-dire suivant leur ordre d’apparition.
Avant de continuer je vous présente deux nouvelles classes :
- .order.first : qui permet de classer une colonne en première position.
- .order.last : qui permet de classer une colonne en dernière position.
Je vous conseille grandement d’utiliser en priorité ces deux classes plutôt que des nombres, lorsque vous souhaitez placer un élément en première ou dernière position.
Bien maintenant plaçons à partir de de 768px (.md) la colonne 1 en dernière position et la colonne 4 en première position puis agrandissons l’écran voir pour les changements.
Pour finir, plaçons la colonne 3 à la 5e position à partir d’une résolution de 992px, (classe .lg) et agrandissons encore l’écran pour voir le nouveau changement de place.
