Wie erreicht man eine benutzerdefinierte Spaltenreihenfolge in Responsive Bootstrap auf Mobilgeräten?

Responsive Bootstrap-Spaltenreihenfolge auf Mobilgeräten

Beim Entwerfen responsiver Layouts kann es eine Herausforderung sein, die gewünschte Spaltenreihenfolge auf verschiedenen Bildschirmgrößen sicherzustellen. Diese Frage befasst sich mit dem speziellen Fall, dass ein verschachteltes Spaltenlayout auf mobilen Geräten anders angeordnet wird als auf größeren Bildschirmen.

Das Problem:

Ein Entwickler hat ein Layout mit zwei Spalten und eine verschachtelte Zeile in der rechten Spalte. Ziel ist es, die Spalten auf Mobilgeräten in der folgenden Reihenfolge anzuzeigen:

|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

Der aktuelle Code führt jedoch auf Mobilgeräten zu der falschen Reihenfolge 1-3-2.

Lösung:

Die Lösung besteht darin, Flexbox für größere Bildschirmgrößen zu deaktivieren und Floats zu verwenden, um das gewünschte Layout auf Mobilgeräten zu erreichen. Der folgende Code demonstriert diesen Ansatz:

<div>

Wie es funktioniert:

• Flexbox auf größeren Bildschirmen deaktivieren: Das d- Flex D-LG-Block-Dienstprogrammklassen aktivieren Flexbox auf Bildschirmen, die kleiner als LG sind, deaktivieren es jedoch auf LG und up.
• Floats für Mobilgeräte verwenden: Wenn Flexbox deaktiviert ist, wird das Float-Left-Dienstprogramm für die Spalten verwendet, um sie nebeneinander zu positionieren.
• Neuordnung mit order-*: Auf Mobilgeräten (wenn Flexbox aktiviert ist) werden die Dienstprogrammklassen order-* verwendet, um die Spalten neu anzuordnen erwünscht.

Alternative Lösung:

Wie in der Antwort erwähnt, besteht eine weitere mögliche Lösung in einem Flexbox-Wrapping-Hack mit w-auto. Bei diesem Ansatz wird eine automatische Breite für die Spalten festgelegt, damit diese auf Mobilgeräten in die nächste Zeile umgebrochen werden können. Es ist jedoch wichtig zu beachten, dass dieser Hack möglicherweise nicht so zuverlässig ist wie die erste Lösung, die auf Standard-Bootstrap-Dienstprogrammen basiert.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine benutzerdefinierte Spaltenreihenfolge in Responsive Bootstrap auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!