Comment puis-je commander les colonnes de manière réactive dans Bootstrap 4 ?

Ordre des colonnes avec Bootstrap 4

Réorganisation des colonnes pour des mises en page réactives

Bootstrap 4 fournit un mécanisme simplifié pour commander les colonnes sur différentes tailles d’écran. Cet article explore les différentes méthodes pour y parvenir.

Bootstrap 4.1

Avec l'introduction de flexbox dans Bootstrap 4.1, l'ordre des colonnes est devenu plus simple. Les classes utilitaires de commande vous permettent désormais de spécifier l'ordre des colonnes souhaité, allant de l'ordre 1 à l'ordre 12. Un classement réactif peut être obtenu en combinant ces classes, comme order-md-12 order-2, qui positionne la colonne en dernière sur les écrans moyens (XXL, XL, LG, MD) et en deuxième sur les très petits écrans (XS).

Exemple :

<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>

Bootstrap 4

Avant Bootstrap 4.1, l'ordre des colonnes reposait sur les classes push et pull. Ces classes ont été modifiées dans Bootstrap 4 et suivent la syntaxe : push-{viewport}-{units} et pull-{viewport}-{units}. Pour obtenir la disposition 1-3-2 souhaitée sur les écrans mobiles/très petits, les classes suivantes seraient utilisées :

Exemple :

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

Remarque :Cette méthode est obsolète dans Bootstrap 4.1.

Direction Flexbox Utilitaires

En plus des utilitaires de commande, Bootstrap 4.1 fournit également les classes flex-column-reverse et flex-md-row. Ces classes vous permettent de changer la direction des colonnes sur différentes tailles d'écran. Par exemple, le code suivant organise les colonnes verticalement sur les écrans mobiles et horizontalement sur les écrans moyens et plus grands :

Exemple :

<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>

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!