Wie kann ich Spalten in Bootstrap 4 und 5 neu anordnen?

Spalten mit Bootstrap 4 neu organisieren

In Bootstrap 4 ist es möglich, Spalten mit verschiedenen Methoden neu anzuordnen, je nach gewünschtem Effekt und Bildschirmgröße .

Für Bootstrap 5 (2021)

Ab Bootstrap 5 wurden die responsiven Bestellklassen aktualisiert und umfassen nun „Order-First“, „Order-Last“ und „Order-0“ bis „Order-5“. Diese Klassen ermöglichen mehr Flexibilität bei der Spaltenanordnung.

Für Bootstrap 4 (2018)

In Bootstrap 4 umfassen die responsiven Sortierklassen „order-first“ und „order-last“. und order-0 bis order-12. Um das gewünschte 1-3-2-Layout auf Mobilgeräten zu erreichen, sollten die folgenden Klassen verwendet werden:

<div class="container">
  <div class="row">
    <div class="col-3 col-md-6">1</div>
    <div class="col-6 col-md-12 order-2 order-md-12">3</div>
    <div class="col-3 col-md-6 order-3">2</div>
  </div>
</div>

Anpassen mit Flexbox

Flexbox wird in Bootstrap nativ unterstützt 4.1 und höher. Dies bietet noch mehr Kontrolle über die Spaltenreihenfolge mithilfe von Richtungsdienstprogrammen:

<div class="container">
  <div class="row flex-column-reverse flex-md-row">
    <div class="col-md-8">2</div>
    <div class="col-md-4">1st on mobile</div>
  </div>
</div>

Mit diesen Optionen bietet Bootstrap reichlich Flexibilität für die Neuorganisation von Spalten basierend auf der Bildschirmgröße und dem gewünschten Layout.

Das obige ist der detaillierte Inhalt vonWie kann ich Spalten in Bootstrap 4 und 5 neu anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!