Wie ändere ich die Spaltenreihenfolge von Bootstrap 3 auf Mobilgeräten?

So ordnen Sie die Spaltenreihenfolge von Bootstrap 3 im mobilen Layout neu an

Beim Erstellen responsiver Layouts mit Bootstrap 3 kann es vorkommen, dass die Reihenfolge nicht stimmt Anzahl der Spalten ändert sich beim Übergang von der Desktop- zur mobilen Ansicht. Um dieses Problem zu beheben und sicherzustellen, dass der Hauptinhalt auf Mobilgeräten ganz oben bleibt, führen Sie die folgenden Schritte aus:

1. Kehren Sie die Spaltenreihenfolge um:

Anstatt die Standardspaltenreihenfolge (Seitenleiste links, Inhalt rechts) für die Desktop-Ansicht zu verwenden, ändern Sie die Reihenfolge für die mobile Ansicht. Zum Beispiel:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

2. Verwenden Sie die Push- und Pull-Klassen:

Verwenden Sie in der Desktop-Ansicht col-lg-push und col-lg-pull, um den Hauptinhalt effektiv nach rechts und die Seitenleiste nach links zu verschieben ihre Bestellung tauschen.

<div class="row">
  <div class="col-lg-9 col-lg-push-3">
    <!-- Main content -->
  </div>
  <div class="col-lg-3 col-lg-pull-9">
    <!-- Sidebar -->
  </div>
</div>

3. Reihenfolge der Spalten umkehren:

Alternativ können Sie die Reihenfolge der Spalten im HTML umkehren, sodass der Hauptinhalt an erster Stelle steht:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

Indem Sie diese Schritte befolgen können Sie die Spalten in der mobilen Ansicht in Bootstrap 3 effektiv neu anordnen und so die gewünschte Inhaltshierarchie sicherstellen.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Spaltenreihenfolge von Bootstrap 3 auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!