Wie stapele ich Bootstrap 4 Divs auf Mobilgeräten und ordne sie nebeneinander auf dem Desktop an?

Divs mit Bootstrap 4 neu positionieren: Auf Mobilgeräten gestapelt, nebeneinander auf dem Desktop

Sie möchten Bootstrap-Divs auf Mobilgeräten neu anordnen Legen Sie sie nebeneinander auf Desktop.

Lösung:

1. Flexbox für größere Breiten deaktivieren:
   Die Flexbox von Bootstrap 4 weist den Spalten gleiche Höhen zu. Um dies zu verhindern, deaktivieren Sie Flexbox für Breiten größer als mittel.

<div>

2. Verwenden Sie Floats für kleinere Breiten (Mobil):
   Aktivieren Sie das Spalten-Floating, um dies zu ermöglichen Die zweite und dritte Spalte (B und C) werden unter die erste Spalte gewickelt (A).

        <div>

3. Spaltenreihenfolge zuweisen:
   Verwenden Sie Order-Utility-Klassen, um die Spalten auf Mobilgeräten neu anzuordnen. Setzen Sie in diesem Fall die Reihenfolge der ersten Spalte auf 1 (Order-1) und die Reihenfolge der zweiten Spalte auf 0 (Order-0). Dadurch wird A unter B auf Mobilgeräten platziert, während die Anordnung nebeneinander auf dem Desktop beibehalten wird.

        <div>

Mit dieser Lösung wird das gewünschte Layout erreicht, wobei Spalte A die volle Höhe behält und die Spalten B und C unten auf dem Handy gestapelt.

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