Wie ordne ich mit Bootstrap 4 ein großes Div neben zwei kürzeren Divs auf dem Desktop an und stapele sie auf Mobilgeräten?

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

Das Problem verstehen:

Ähnlich wie bei der genannten Frage beinhaltet dieses Szenario die Neuordnung von drei Divs beim Wechsel vom Desktop zum Mobilgerät. Auf dem Desktop sollten diese Divs nebeneinander angeordnet sein, während sie auf Mobilgeräten vertikal gestapelt sein sollten. Die bereitgestellten Bilder veranschaulichen das gewünschte Layout deutlich.

Ansprache der Lösung:

Um dieses Layout zu erreichen, müssen wir das Standard-Flexbox-Verhalten von Bootstrap 4 für größere Breiten deaktivieren. Dadurch wird die Höhe der Säulen nicht mehr eingeschränkt. Stattdessen können wir die Float-Eigenschaft verwenden, um die Spalten B und C auf natürliche Weise nach rechts auszurichten, da A höher ist.

Implementieren der Reihenfolge:

So ordnen Sie die neu an Spalten auf Mobilgeräten verwenden wir die von Bootstrap 4 bereitgestellten Order-Utility-Klassen:

• Desktop (größere Breiten): A-B-C
• Mobil: B-A-C

Hier ist ein Ausschnitt, der diesen Ansatz implementiert:

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

Diese Lösung ordnet die Divs effektiv wie beabsichtigt neu an und bietet das spezifische Layout an sowohl Desktop- als auch Mobilgeräte.

Das obige ist der detaillierte Inhalt vonWie ordne ich mit Bootstrap 4 ein großes Div neben zwei kürzeren Divs auf dem Desktop an und stapele sie auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!