Comment obtenir une grande division à côté de deux divisions plus courtes sur ordinateur et empilées sur mobile ?

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

Problème :

Obtenir une mise en page où trois divs sont empilés sur les appareils mobiles mais apparaissent côte à côte sur des écrans plus grands (bureau).

Solution :

La solution consiste à désactiver le comportement de la flexbox sur des écrans plus larges et utiliser des flotteurs pour permettre aux divs les plus courts (B et C) de s'aligner naturellement vers la droite. Sur mobile, la propriété flexbox order est utilisée pour réorganiser les divs comme suit :

• Bureau : A-B-C
• Mobile : B-A-C

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>

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!