Wie kann ich Bootstrap 3-Spalten auf größeren Bildschirmen neu anordnen und gleichzeitig das mobile Layout beibehalten?

Ändern der Spaltenreihenfolge im Bootstrap 3 Mobile Layout

Sie arbeiten mit einem responsiven Layout mit Bootstrap 3.x, das aus zwei Spalten besteht: einer Seitenleiste (3) und Inhalt (9). Während das Layout auf Desktops gut wiedergegeben wird:

navbar
[3][9]

Auf Mobilgeräten ändert sich die Reihenfolge:

navbar
[3]
[9]

Sie möchten die Reihenfolge auf Mobilgeräten beibehalten, wobei der Inhalt oben steht.

Lösung: Spalten neu anordnen

Der Ansatz zum Neuanordnen von Spalten variiert je nach Bildschirmgröße. In diesem Fall können Sie die Reihenfolge auf kleineren Bildschirmen nicht ändern. Sie können es jedoch in größeren Bildschirmen ändern.

Schritt 1: Ändern Sie die Reihenfolge der Spalten

Ändern Sie die Reihenfolge Ihrer Spalten im Code:

<!-- Main Content -->
<div>

Standardmäßig wird der Hauptinhalt zuerst angezeigt, auch auf Mobilgeräten.

Schritt 2: Verwenden col-lg-push und col-lg-pull

col-lg-push und col-lg-pull ermöglichen es Ihnen, Spalten in großen Bildschirmen neu anzuordnen. So können Sie auf größeren Bildschirmen die Seitenleiste links und den Hauptinhalt rechts anzeigen:

<!-- Main Content -->
<div>

Mit dieser Methode können Sie die Spalten auf großen Bildschirmen neu anordnen, ohne das Layout auf Mobilgeräten zu beeinträchtigen .

Das obige ist der detaillierte Inhalt vonWie kann ich Bootstrap 3-Spalten auf größeren Bildschirmen neu anordnen und gleichzeitig das mobile Layout beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!