Comment réorganiser de manière réactive les éléments Bootstrap sur mobile ?

Commandez les éléments Bootstrap de manière réactive avec la réorganisation mobile

Dans Bootstrap, la gestion de l'ordre des colonnes est cruciale pour les mises en page réactives. Cependant, réaliser la commande souhaitée sur mobile peut parfois poser des défis.

Code initial :

<div class="row">
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-12">1</div>
      <div class="row">
        <div class="col-lg-12">3</div>
      </div>
    </div>
  </div>
  <div class="col-lg-8 order-lg-first">2</div>
</div>

Problème :

Ce code donne l'ordre suivant sur mobile : 1, 3, 2 au lieu du 1, 2, souhaité 3.

Solution 1 : Désactiver Flexbox sur les grands écrans

Bootstrap utilise flexbox, qui impose des hauteurs de colonnes égales. Pour réorganiser les colonnes sur mobile, Flexbox peut être désactivé pour les grands écrans (par exemple, les ordinateurs de bureau).

<div class="row d-flex d-lg-block">
  <div class="col-lg-8 order-1 float-left">
    <div class="card card-body tall">2</div>
  </div>
  <div class="col-lg-4 order-0 float-left">
    <div class="card card-body">1</div>
  </div>
  <div class="col-lg-4 order-1 float-left">
    <div class="card card-body">3</div>
  </div>
</div>

Solution 2 : Flexbox Wrap Hack avec largeur automatique

Un autre L'option implique l'utilisation d'un hack flexbox wrap avec des largeurs de colonnes automatiques (w-auto).

Supplémentaire Ressources :

• [Hauteur des colonnes réactives Bootstrap](https://www.w3resource.com/twitter-bootstrap/responsive-columns-height.php)
• [ Comment corriger l'ordre inattendu des colonnes dans bootstrap 4?](https://stackoverflow.com/questions/48509758/how-to-fix-unexpected-column-order-in-bootstrap-4)

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!