Comment trier efficacement les colonnes dans Bootstrap 4 et 5 ?

Ordre des colonnes avec Bootstrap 4

Dans Bootstrap 4, l'ordre des colonnes peut être réalisé en utilisant une combinaison de classes et de flexbox. Pour obtenir la disposition 1-3-2 souhaitée sur les écrans mobiles, nous explorerons les techniques suivantes :

2021 - Bootstrap 5

Bootstrap 5 a introduit de nouvelles classes pour commande réactive : commande en premier, commande en dernier et commande 0 à commande-5. Cela simplifie l'ordre des colonnes, vous permettant de définir l'ordre souhaité pour chaque taille de fenêtre d'affichage.

2018 - Bootstrap 4

Bêta pré-4.0 :

Avant la version bêta de Bootstrap 4.0, les classes push et pull avaient le format push-{viewport}-{units} et pull-{viewport}-{units} sans l'infixe xs-. Pour obtenir une disposition 1-3-2 sur mobile, nous utiliserions des classes comme celle-ci :

<div class="col-3 col-md-6"></div>
<div class="col-6 col-md-12 push-xs-6 pull-xs-3"></div>
<div class="col-3 col-md-6 pull-xs-6"></div>

Bootstrap 4.1 et versions ultérieures

Bootstrap 4.1 a introduit flexbox, fournissant une manière plus intuitive de classer les colonnes. Les classes de commande réactives vont de la commande 1 à la commande 12. En définissant ces classes, nous pouvons spécifier l'ordre des colonnes par rapport à leur .row parent :

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

Modification de l'ordre à l'aide de la direction Flexbox

En plus de classer les classes , Bootstrap 4.1 permet également d'inverser l'ordre des colonnes à l'aide des utilitaires de direction flexbox :

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

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!