Il peut arriver que l'ordre des colonnes doive être modifié selon la taille de l'écran.

Par exemple:

La classe order- permet de modifier l'ordre des colonnes.

Les colonnes se placent selon l'ordre des numéros spécifiés (1, 2, 3, etc.)

Par défaut, les colonnes ont un ordre de 0. Les colonnes pour qui aucun ordre n'est spécifié se placent donc en premier.

Par exemple:

<div class="container">
  <div class="row">
    <div class="col-4 order-2">Colonne 1</div>
    <div class="col-4">Colonne 2</div>
    <div class="col-4 order-1">Colonne 3</div>
  </div>
</div>

Affichera le résultat suivant:

On peut définir un ordre différent selon les tailles d'écran en ajoutant l'abréviation du breakpoint dans la classe.

Par exemple:

<div class="container">
  <div class="row">
    <div class="col-4 order-2 order-lg-1">Colonne 1</div>
    <div class="col-4 order-lg-3">Colonne 2</div>
    <div class="col-4 order-1 order-lg-2">Colonne 3</div>
  </div>
</div>

<aside> ⬅️ Offset - décaler des colonnes

</aside>

<aside> ➡️ Nesting - imbriquer des colonnes

</aside>