Réorganiser le contenu de votre site avec flexbox

Depuis l’arrivée de Flexbox et la version 4 de Bootstrap, il est désormais possible d’organiser le contenu de votre site en fonction de vos besoins. Découvrons ensemble comment réorganiser son contenu de manière responsive avec Flexbox et Bootstrap 4.

Posté le par Benoît Philibert|1030 vues

Avec des propriétés comme Flexbox on ne peut qu’aimer faire du CSS. Il y a pas si longtemps, ce genre de propriétés n’existaient pas et il fallait soit passer par du JavaScript, soit par les classes CSS visible et hidden de Bootstrap (mais cette façon de faire nous obligeait à ajouter du contenu HTML visible ou non en fonction du media screen actif… pas très propre).

La bonne pratique

Avant toute chose, il est important de réfléchir comme le framework.
En effet, Bootstrap applique une logique « mobile first » qui vise à favoriser l’affichage des écrans mobiles avant d’inviter à se pencher sur le web. On utilise des breakpoints CSS appelés @media screen.

Pour rappel, les breakpoints appliqués par Bootstrap (repères CSS de références permettant de délimiter une taille d’écran pour afficher le contenu de votre site en conséquence)  :

$grid-breakpoints: (
  xs: 0, // extra small
  sm: 576px, // small
  md: 768px, // medium
  lg: 992px, // large
  xl: 1200px // extra large
) !default;

La logique de réflexion

Lorsque l’on fait du responsive, il faut toujours réfléchir du plus petit au plus grand écran. C’est à dire favoriser le mobile à la tablette puis au web. Logique : l’information sur mobile est plus compliqué à mettre en oeuvre avec une taille d’écran réduite. 

Des normes appliquées par défaut

Il y a tout d’abord un ordre logique : celui définit par vos balises HTML. On ne réinvente pas la roue. Votre première balise s’affiche toujours en premier, ainsi de suite. 

Il existe aussi des règles de bases qu’applique le framework par défaut. Comme nous l’avons abordé plus haut, Bootstrap favorise le « mobile first ». Via cette réflexion, les breakpoints sont eux aussi organisés de la sorte.
En effet, lorsqu’on applique une classes CSS propre à une certaine taille d’écran, la lecture est toujours la même : 

« Sur les écrans d’une largeur supérieur à … » 

Pour plus de clarté, lorsqu’on utilise le préfixe *-md-* on applique des spécificités à la balise HTML lorsque l’écran d’affichage est supérieur à 768 pixels.

Appliquer un ordre différent sur des écrans à la largeur inférieure à 768px

Prenons un conteneur principal incluant 3 blocs comme ci-dessous :

<div>
  <div>Bloc 1</div>
  <div>Bloc 2</div>
  <div>Bloc 3</div>
</div>

Appliquons maintenant notre règle. Dans un premier temps, nous devons rendre le conteneur principal « flexible » (en CSS cela donne : display: flex;) avec la classe d-flex :

<div class="d-flex">
  <div>Bloc 1</div>
  <div>Bloc 2</div>
  <div>Bloc 3</div>
</div>

Par la suite, appliquons à chaque bloc l’ordre désiré avec la classe order-*. Par exemple, le bloc 2 en premier et le bloc 3 en second :

<div class="d-flex">
  <div class="order-2">Bloc 1</div>
  <div class="order-0">Bloc 2</div>
  <div class="order-1">Bloc 3</div>
</div>
Il est bon de noté que la classification commence à 0 et non 1 : order-0, order-1

Nous n’avons pas encore accomplit notre travail.
En effet, le nouvel ordre a été appliqué sur tout type d’écran.
Pour finaliser notre démarche, nous devons rajouter le breakpoint md :

<div class="d-flex">
  <div class="order-md-2">Bloc 1</div>
  <div class="order-md-0">Bloc 2</div>
  <div class="order-md-1">Bloc 3</div>
</div>

Enfin, pour réadapter l’organisation de base sur les autres écrans, nous devons rajouter la classe order sans préfixe cette fois-ci afin d’appliquer la condition à tous les breakpoints disponibles.

<div class="d-flex">
  <div class="order-0 order-md-2">Bloc 1</div>
  <div class="order-1 order-md-0">Bloc 2</div>
  <div class="order-2 order-md-1">Bloc 3</div>
</div>

Faites le test !

Pour plus d’information sur le sujet, n’hésitez pas à consulter la documentation officielle de Bootstrap sur la classe order – Flexbox


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.