Wie erreicht man ein großes Div neben zwei kürzeren Divs auf dem Desktop und gestapelt auf Mobilgeräten?

Ein großes Div neben zwei kürzeren Divs auf dem Desktop und gestapelt auf Mobilgeräten

Problem:

Erreichen eines Layouts, bei dem Auf Mobilgeräten werden drei Divs gestapelt, auf größeren Bildschirmen jedoch nebeneinander angezeigt (Desktop).

Lösung:

Die Lösung besteht darin, das Flexbox-Verhalten auf breiteren Bildschirmen zu deaktivieren und Floats zu verwenden, um eine natürliche Ausrichtung der kürzeren Divs (B und C) zu ermöglichen das Recht. Auf Mobilgeräten wird die Flexbox-Reihenfolge-Eigenschaft verwendet, um die Divs wie folgt neu anzuordnen:

• Desktop: A-B-C
• Mobil: 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>

Das obige ist der detaillierte Inhalt vonWie erreicht man ein großes Div neben zwei kürzeren Divs auf dem Desktop und gestapelt auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!