Wie kann ich die Spaltenreihenfolge von Bootstrap 3 in mobilen Layouts umkehren?

Bootstrap 3-Spalten in mobilen Layouts neu anordnen

Beim Entwerfen responsiver Layouts ist es oft notwendig, die Reihenfolge der Spalten auf kleineren Bildschirmen anzupassen. Dieser Artikel befasst sich mit dem spezifischen Problem der Änderung der Spaltenreihenfolge in einem mobilen Bootstrap 3-Layout, bei dem derzeit eine Seitenleistenspalte über der Hauptinhaltsspalte gestapelt wird.

Problem:

Ich habe ein responsives Layout mit Navigationsleiste, Seitenleiste und Hauptinhalt. Auf dem Desktop sieht das Layout wie folgt aus:

navbar
[3][9]

Auf Mobilgeräten ändert sich das Layout jedoch zu:

navbar
[3]
[9]

Ich möchte die Reihenfolge auf Mobilgeräten umkehren zu:

navbar
[9]
[3]

Lösung:

Während es nicht möglich ist, die Spaltenreihenfolge auf Mobilgeräten direkt zu ändern Wenn Sie das integrierte Grid-System von Bootstrap verwenden, gibt es eine Problemumgehung. Durch Umkehren der Reihenfolge der Spalten im HTML-Code können Sie manipulieren, wie sie auf verschiedenen Bildschirmgrößen angezeigt werden.

In diesem Fall haben wir Folgendes:

<div>
<p>Um die Reihenfolge umzukehren mobil, ändern Sie es in:</p>
<pre class="brush:php;toolbar:false"><div>
<p>Standardmäßig wird der Hauptinhalt zuerst angezeigt, auch auf Mobilgeräten. Die Klassen col-lg-push und col-lg-pull werden verwendet, um die Spalten auf größeren Bildschirmgrößen neu anzuordnen und sicherzustellen, dass die Seitenleiste links und der Hauptinhalt rechts bleibt.</p>
<p><strong>Hinweis :</strong> Diese Lösung funktioniert nur für große Bildschirmgrößen (z. B. Laptops). Auf kleineren Bildschirmen werden die Spalten weiterhin wie von Bootstrap vorgesehen gestapelt.</p>
</div>