Comment organiser une grande division à côté de deux divisions plus courtes sur un ordinateur de bureau et les empiler sur un mobile à l'aide de Bootstrap 4 ?

Une grande division à côté de deux divisions plus courtes sur ordinateur et empilées sur mobile avec Bootstrap 4

Comprendre le problème :

Semblable à la question référencée, ce scénario implique de réorganiser trois divs lors du passage du bureau au mobile. Sur ordinateur, ces div doivent être disposés côte à côte, tandis que sur mobile, ils doivent être empilés verticalement. Les images fournies illustrent clairement la mise en page souhaitée.

Résolution de la solution :

Pour obtenir cette mise en page, nous devons désactiver le comportement flexbox par défaut de Bootstrap 4 pour les plus grandes largeurs. Ce faisant, les colonnes n’auront plus de contraintes de hauteur. Au lieu de cela, nous pouvons utiliser la propriété float pour que les colonnes B et C s'alignent naturellement vers la droite puisque A est plus grand.

Mise en œuvre de l'ordre :

Pour réorganiser le colonnes sur mobile, nous utilisons les classes d'utilitaires de commande fournies par Bootstrap 4 :

• Bureau (largeurs plus grandes) : A-B-C
• Mobile : B-A-C

Voici un extrait qui implémente cette approche :

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

Cette solution réorganise efficacement les div comme prévu, offrant la mise en page spécifique sur les ordinateurs de bureau et les appareils mobiles.

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!