freiwerk
Wiki
← Zurück zur Übersicht

Divi – Spaltenreihenfolge auf mobilen Geräten

WordPress · Divi 0 offen
1
Problem & Hintergrund
Divi

Divi stapelt Spalten auf mobilen Geräten standardmäßig von links nach rechts – von oben nach unten. Bei einem zweispaltigen Layout mit Text links und Bild rechts landet der Text also mobil oben und das Bild darunter.

Das ist häufig unerwünscht – oft soll das Bild auf dem Smartphone oberhalb des Textes erscheinen, auch wenn es auf dem Desktop rechts steht.

🖥 Desktop – gewünscht
📝 Text (links)
🖼 Bild (rechts)
📱 Mobil – Standard (unerwünscht)
📝 Text
🖼 Bild
💡
Lösung: Über CSS flexbox und die order-Eigenschaft lässt sich die Reihenfolge für mobile Geräte frei festlegen – ohne das Desktop-Layout zu verändern.
2
Voraussetzungen
Divi
  • Divi Theme oder Divi Builder muss aktiv sein.
  • Die Methode funktioniert mit 2, 3, 4, 5 oder 6 Spalten in einer Zeile.
  • Kein Plugin erforderlich – nur benutzerdefiniertes CSS in den Divi-Einstellungen.
⚠️
Achtung: Das CSS wird direkt in den Zeileneinstellungen gepflegt – nicht im globalen CSS. Jede Zeile, die eine andere Reihenfolge benötigt, muss separat konfiguriert werden.
3
Schritt 1 – CSS zur Zeile hinzufügen
CSSDivi

Pfad in Divi

Zeile auswählen → ⚙️ Einstellungen → Reiter „Erweitert" → Benutzerdefiniertes CSS → Haupt-Element

CSS-Code einfügen

/* Flexbox aktivieren – ermöglicht freie Spaltenreihenfolge */
display: flex;
flex-wrap: wrap;
✅
Warum flex-wrap: wrap? Ohne flex-wrap: wrap würden alle Spalten auf mobilen Geräten nebeneinander bleiben und nicht untereinander gestapelt werden.
4
Schritt 2 – Reihenfolge der Spalten festlegen
CSSDivi

Für jede Spalte einzeln den gewünschten CSS-Code einfügen:

Pfad in Divi (pro Spalte wiederholen)

Spalte auswählen → ⚙️ Einstellungen → Reiter „Erweitert" → Benutzerdefiniertes CSS → Haupt-Element

CSS-Code für jede Spalte

Spalte, die OBEN erscheinen soll (mobil):

order: 1;

Spalte, die DARUNTER erscheinen soll:

order: 2;
💡
Mehr als 2 Spalten: Einfach weiternummerieren – order: 3;, order: 4; usw. Niedrige Zahlen erscheinen weiter oben.
⚠️
Wichtig: Jede Spalte der Zeile muss einen order-Wert erhalten – auch Spalten, die ihre Position nicht ändern. Sonst kann die Reihenfolge unvorhersehbar sein.
5
Praxisbeispiel – Text links, Bild rechts
Beispiel

Ziel: Auf dem Desktop steht der Text links, das Bild rechts. Auf dem Smartphone soll das Bild über dem Text erscheinen.

Zeile (Haupt-Element)

display: flex;
flex-wrap: wrap;

Ergebnis auf dem Smartphone

🖼 Bild (order: 1)
📝 Text (order: 2)

Spalte 1 – Text (Desktop links)

/* Mobil: erscheint UNTEN */
order: 2;

Spalte 2 – Bild (Desktop rechts)

/* Mobil: erscheint OBEN */
order: 1;
✅
Ergebnis: Das Desktop-Layout bleibt unverändert (Text links, Bild rechts). Auf dem Smartphone erscheint das Bild oben und der Text darunter.
6
Checkliste & häufige Fehlerquellen
Checkliste

Checkliste vor dem Speichern

  • ☐ display: flex; flex-wrap: wrap; im Haupt-Element der Zeile eingetragen
  • ☐ Jede Spalte hat einen order-Wert erhalten
  • ☐ Kein doppelter order-Wert (jede Spalte eine eindeutige Zahl)
  • ☐ Im Divi Visual Builder auf mobiler Ansicht getestet

Häufige Fehler

  • Spalten stapeln sich nicht: flex-wrap: wrap vergessen
  • Reihenfolge ändert sich auch auf dem Desktop: Das ist kein Fehler – order wirkt auf alle Geräte gleich. Wenn das unerwünscht ist, muss ein Media-Query verwendet werden (CSS in dem globalen Stylesheet, nicht in Divi).
  • Eine Spalte springt an falsche Position: Wahrscheinlich hat nicht jede Spalte einen order-Wert.
🔗