Wie ordne ich Bootstrap-Spalten auf Mobilgeräten anders als auf Desktops neu an?

Responsives Layout mit Änderung der Spaltenreihenfolge in Bootstrap

Bei der Webentwicklung mit Bootstrap kann es erforderlich sein, Spalten auf Mobilgeräten anders anzuordnen als auf größeren Bildschirmen. Diese Frage untersucht ein Szenario, in dem die Spaltenreihenfolge von 1-3-2 in der Desktop-Version zu 1-2-3 in der mobilen Version geändert werden soll.

Bootstrap 4 verwendet Flexbox für das Layout, was normalerweise dazu führt in gleichen Höhen für Säulen. Diese Funktion stellt eine Herausforderung dar, wenn es darum geht, das in diesem Fall gewünschte Desktop-Layout zu erreichen. Um dies zu umgehen, besteht ein Ansatz darin, Flexbox auf größeren Bildschirmen (z. B. LG) zu deaktivieren und Floats zu verwenden, um eine natürliche Ausrichtung von Spalten zu ermöglichen.

Hier ist ein Beispielcode, der diesen Ansatz beinhaltet:

<div>

So funktioniert es:

• Spalten werden in derselben Zeile beibehalten, da die Reihenfolge relativ zur übergeordneten Zeile ist.
• d-flex und d-lg-block deaktivieren Flexbox auf LG-Bildschirmen und größer.
• float-left richtet Spalten links aus, wenn Flexbox aktiviert ist deaktiviert.
• order-* ordnet die Spalten neu, wenn Flexbox auf Mobilgeräten aktiviert ist.

Eine weitere Möglichkeit besteht darin, Flexbox zu erkunden Wrapping-Hacks mit W-Auto. Die oben vorgestellte Lösung bietet jedoch eine einfache Möglichkeit, die gewünschte Spaltenreihenfolge in Bootstrap zu erreichen.

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