Wie ordne ich Bootstrap 4-Divs neu an: nebeneinander auf dem Desktop, gestapelt auf Mobilgeräten?

Divs mit Bootstrap 4 neu anordnen: Große Divs neben kürzeren Divs auf dem Desktop und gestapelt auf Mobilgeräten

Sie möchten drei Divs auf einem neu anordnen Webseite und zeigt sie nebeneinander auf Desktop-Geräten und gestapelt auf Mobilgeräten an Geräte.

Um dies zu erreichen, müssen Sie das Flexbox-Verhalten von Bootstrap 4 überschreiben, das dazu führt, dass Spalten die gleiche Höhe haben. Bei größeren Breiten sollten Sie die Flexbox deaktivieren. Dann können Sie Floats verwenden, um sicherzustellen, dass die zweite und dritte Spalte (B und C) natürlich nach rechts schweben, vorausgesetzt, die erste Spalte (A) ist höher.

Um die Neuordnung auf Mobilgeräten abzuschließen, Nutzen Sie die Flexbox-Order-Eigenschaft. Dadurch wird sichergestellt, dass die Spalten in der gewünschten Reihenfolge angezeigt werden.

Code-Snippet:

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

In diesem Beispiel die CSS-Klassen order-1 und float-left sorgen Sie für die gewünschte Anordnung auf Desktop-Geräten. Auf Mobilgeräten ist die D-Flex-Klasse deaktiviert, sodass die drei Divs vertikal gestapelt werden können.

Das obige ist der detaillierte Inhalt vonWie ordne ich Bootstrap 4-Divs neu an: nebeneinander auf dem Desktop, gestapelt auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!