Comment réorganiser les divisions Bootstrap 4 : côte à côte sur le bureau, empilées sur mobile ?

Réorganisation des divisions avec Bootstrap 4 : grandes divisions adjacentes aux divisions plus courtes sur ordinateur et empilées sur mobile

Vous souhaitez réorganiser trois divisions sur un page Web, en les affichant côte à côte sur les appareils de bureau et empilés sur les appareils mobiles.

Pour y parvenir, vous Vous devez remplacer le comportement flexbox de Bootstrap 4, ce qui fait que les colonnes ont la même hauteur. Pour des largeurs plus grandes, vous devez désactiver la flexbox. Ensuite, vous pouvez utiliser des flotteurs pour vous assurer que les deuxième et troisième colonnes (B et C) flottent naturellement vers la droite, étant donné que la première colonne (A) est plus haute.

Pour terminer la réorganisation sur les appareils mobiles, utilisez la propriété de commande flexbox. Cela garantira que les colonnes apparaissent dans l'ordre souhaité.

Extrait de code :

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

Dans cet exemple, les classes CSS order-1 et float-left garantir la disposition souhaitée sur les appareils de bureau. Sur les appareils mobiles, la classe d-flex est désactivée, permettant aux trois div de s'empiler verticalement.

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!