Wie ordne ich Bootstrap-Elemente auf Mobilgeräten reaktionsschnell neu an?

Bootstrap-Elemente reaktionsschnell mit mobiler Neuordnung anordnen

In Bootstrap ist die Verwaltung der Spaltenreihenfolge für reaktionsfähige Layouts von entscheidender Bedeutung. Allerdings kann es manchmal eine Herausforderung sein, die gewünschte Bestellung auf dem Handy zu erreichen.

Anfangscode:

<div class="row">
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-12">1</div>
      <div class="row">
        <div class="col-lg-12">3</div>
      </div>
    </div>
  </div>
  <div class="col-lg-8 order-lg-first">2</div>
</div>

Problem:

Dieser Code führt auf Mobilgeräten zu folgender Reihenfolge: 1, 3, 2 statt der gewünschten 1, 2, 3.

Lösung 1: Deaktivieren Sie Flexbox auf großen Bildschirmen

Bootstrap verwendet Flexbox, das gleiche Spaltenhöhen erzwingt. Um Spalten auf Mobilgeräten neu anzuordnen, kann Flexbox für große Bildschirme (z. B. Desktops) deaktiviert werden.

<div class="row d-flex d-lg-block">
  <div class="col-lg-8 order-1 float-left">
    <div class="card card-body tall">2</div>
  </div>
  <div class="col-lg-4 order-0 float-left">
    <div class="card card-body">1</div>
  </div>
  <div class="col-lg-4 order-1 float-left">
    <div class="card card-body">3</div>
  </div>
</div>

Lösung 2: Flexbox Wrap Hack mit automatischer Breite

Andere Option beinhaltet die Verwendung eines Flexbox-Wrap-Hacks mit automatischen Spaltenbreiten (w-auto).

Zusätzlich Ressourcen:

• [Bootstrap Responsive Columns Height](https://www.w3resource.com/twitter-bootstrap/responsive-columns-height.php)
• [ So beheben Sie eine unerwartete Spaltenreihenfolge im Bootstrap 4?](https://stackoverflow.com/questions/48509758/how-to-fix-unexpected-column-order-in-bootstrap-4)

Das obige ist der detaillierte Inhalt vonWie ordne ich Bootstrap-Elemente auf Mobilgeräten reaktionsschnell neu an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!