Comment puis-je réorganiser les colonnes dans Bootstrap 4 et 5 ?

Réorganiser les colonnes avec Bootstrap 4

Dans Bootstrap 4, il est possible de réorganiser les colonnes en utilisant différentes méthodes, en fonction de l'effet souhaité et de la taille de l'écran .

Pour Bootstrap 5 (2021)

À partir de Bootstrap 5, les classes de commande réactives ont été mises à jour pour inclure la commande en premier, la commande en dernier et la commande-0 à la commande-5. Ces classes permettent plus de flexibilité dans la disposition des colonnes.

Pour Bootstrap 4 (2018)

Dans Bootstrap 4, les classes de tri réactives incluent la commande en premier, la commande en dernier , et de la commande 0 à la commande 12. Pour obtenir la disposition 1-3-2 souhaitée sur mobile, les classes suivantes doivent être utilisées :

<div class="container">
  <div class="row">
    <div class="col-3 col-md-6">1</div>
    <div class="col-6 col-md-12 order-2 order-md-12">3</div>
    <div class="col-3 col-md-6 order-3">2</div>
  </div>
</div>

Personnalisation avec Flexbox

Flexbox est pris en charge nativement dans Bootstrap 4.1 et versions ultérieures. Cela offre encore plus de contrôle sur l'ordre des colonnes à l'aide des utilitaires de direction :

<div class="container">
  <div class="row flex-column-reverse flex-md-row">
    <div class="col-md-8">2</div>
    <div class="col-md-4">1st on mobile</div>
  </div>
</div>

Avec ces options, Bootstrap offre une grande flexibilité pour réorganiser les colonnes en fonction de la taille de l'écran et de la disposition souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!