Divi 5 Reihenfolge von Spalten mobil ändern — schnell per Klick

Die wichtigsten Fragen und Antworten in Kürze:

In Divi die Reihenfolge von Spalten mobil zu ändern war lange eine nicht einfache Aufgabe: In Divi 4 brauchte man dafür CSS-Tricks (Cascading Style Sheets). Jetzt geht das deutlich einfacher. Du kannst Spalten neu ordnen, Strukturen pro Breakpoint festlegen und sogar Bilder nebeneinander auf Smartphones darstellen — alles per Mausklick. Ich erkläre Dir die wichtigsten Optionen, gebe praktische Tipps und zeige typische Anwendungsfälle.

Warum das Umordnen mobil so wichtig ist

Mobilgeräte haben begrenzten Platz. Eine Desktop-Anordnung ergibt auf dem Smartphone oft keinen Sinn. Wenn Du die Divi 5 Reihenfolge von Spalten mobil ändern kannst, verbesserst Du:

• Lesbarkeit (Wichtiger Inhalt zuerst)
• Conversion (Call-to-Action sichtbar halten)
• Designkontrolle (Bilder und Text bleiben sinnvoll angeordnet)

Grundlagen: Breakpoints und Vorschau

Divi 5 bietet bis zu sieben mobile Breakpoints, die Du aktivieren und individuell per Pixelwert einstellen kannst. Das bedeutet: Du bestimmst genau, bei welcher Bildschirmbreite eine Änderung greifen soll. In der Vorschau kannst Du direkt testen, wie die Reihenfolge und das Layout bei Tablet oder Smartphone aussehen.

Block-Modus vs. Flexbox-Modus

Zwei Konzepte sind wichtig: der klassische Block-Modus (wie in Divi 4) und der neue Flexbox-Modus in Divi 5.

• Block-Modus: Spalten brechen standardmäßig untereinander um in der mobilen Ansicht (Screenshot 2). Gut, wenn das Layout immer linear sein soll.
• Flexbox-Modus: Mehr Kontrolle. Spalten können mobil auch nebeneinander bleiben oder per Reihenfolge gesteuert werden. Ideal, um gezielt Content-Positionen zu verändern. Hier erfährst Du mehr zu den neuen Divi 5 – Flexbox-Funktionen

Auch für die neue Divi 5 Funktion „Group-Modules“ ist die neue Flexbox-Funktion sehr relevant.

So stellst Du den Flexbox-Modus ein

Du wechselst in die Zeilen-Einstellungen unter das Tab Design → Layout und aktivierst die Flex-Option (in der deutschen Oberfläche manchmal als Biegen/Flex bezeichnet). Sobald aktiv, greifen neue Ausrichtungs- und Reihenfolge-Optionen.

Reihenfolge ändern: Order-Werte nutzen

Der praktische Kern: Du vergibst pro Spalte einen Order-Wert Das ist eine Zahl (von 0-4) — auch negative Werte sind möglich. Kleinere Zahlen erscheinen weiter hinten, größere weiter vorne. Mit 0 setzt Du das Standardverhalten zurück.

1. Spalte öffnen
2. Im Bereich Design → Layout den Order-Wert (übersetzte „Auftrag“) setzen
3. Für jeden Breakpoint das gewünschte Verhalten testen

Beispiel: Ein Button in Spalte 3 soll mobil zuerst erscheinen. Setze für diese Spalte im Tablet- oder Smartphone-Breakpoint einen Order von -1. Fertig — die Spalte samt Button springt nach oben. Kein CSS nötig.

Strukturvorlagen pro Breakpoint in Divi 5 anwenden

Flexbox ist mächtig, aber manchmal willst Du einfach eine andere Spaltenstruktur (z. B. zwei statt drei Spalten) für Tablet oder Mobile. Divi 5 hat dafür die Funktion Strukturvorlage anwenden. Du wählst in der Zeile eine vorgefertigte Spaltenaufteilung und kannst sie gezielt für einzelne Breakpoints aktivieren.

Vorteil: Du bleibst flexibel. Für Desktop behältst Du die volle Spaltenanzahl, für Tablet wählst Du zweispaltig und für Smartphone eine Spalte. Alles per Klick.

Bilder nebeneinander auf dem Smartphone darstellen

Typische Herausforderung: Zwei Bilder, die auf dem Desktop nebeneinander stehen, werden mobil automatisch untereinander gesetzt. Wenn Du aber beide Bilder mobil nebeneinander brauchst (z. B. Icons, Produktfotos), kannst Du in der Zeile die Strukturvorlage auf eine zweispaltige Zeile für den Smartphone-Breakpoint setzen. Dadurch bleiben die Bilder nebeneinander — ganz ohne CSS.

Im oberen Bereich des Screenshots sind Text-Bildanordnungen auf dem Smartphone zu sehen. Oft ergibt sich dabei das Problem, das ein Bild auf ein Bild folgt. Mit der Flexboxfunktion kannst Du die Reihenfolge der Bilder und Texte einfach mit einem Klick von unten nach oben ändern, so dass dem Bild ein Text folgt.

Typische Probleme und wie Du sie löst

• Ungünstige Reihenfolge: Nutze die neuen Order-Werte in Divi 5, statt nervige CSS-Hacks.
• Zu kleine Spalten: Stelle eine einspaltige Strukturvorlage für den jeweiligen Breakpoint ein.
• Ausrichtung von Text und Bild: Flexbox erlaubt Justierung per Align-Optionen — zentriert, oben, unten.

Praktische Tipps aus Erfahrung

Ein paar pragmatische Hinweise, die Dir Zeit sparen:

• Arbeite breakpoint-weise: Ändere zuerst Tablet, teste dann Smartphone.
• Nutze negative Order-Werte, wenn Du ein Element wirklich nach vorn holen willst.
• Wenn Du viel mit Bild-Text-Kombinationen arbeitest, lege für mobile Varianten spezifische Strukturvorlagen an.
• Behalte die Desktop-Ansicht als Referenz. Nicht alles muss auf Mobil gleich aussehen.
• Teste auf echten Geräten. Die Browser-Vorschau ist super, aber das Verhalten auf echten Phones ist meist der Maßstab.

Wie kann ich in Divi 5 die Reihenfolge von Spalten mobil ändern?

Setze die Zeile in den Flexbox-Modus unter Design → Layout. Vergib für jede Spalte im gewünschten Breakpoint einen Order-Wert. Kleinere Zahlen rücken weiter nach hinten, negative Werte bringen Elemente nach vorn. Alternativ kannst Du eine Strukturvorlage anwenden, um die Anzahl der Spalten pro Breakpoint zu ändern.

Kann ich Bilder im Smartphone-Modus nebeneinander anzeigen?

Ja. Verwende die Funktion Strukturvorlage anwenden in der Zeile und wähle für den Smartphone-Breakpoint eine zweispaltige Zeile. So bleiben die Bilder nebeneinander, ohne CSS.

Was ist der Unterschied zwischen Block- und Flexbox-Modus?

Im Block-Modus brechen Spalten standardmäßig untereinander um. Der Flexbox-Modus erlaubt kontrollierte Ausrichtung und Reihenfolge per Order-Werten sowie feinere Align-Optionen.

Brauche ich weiterhin CSS für Reihenfolge-Änderungen?

In den meisten Fällen nicht. Divi 5 bietet native Tools, um Reihenfolge und Struktur pro Breakpoint per Klick zu steuern. CSS bleibt für Spezialfälle und sehr individuelle Anpassungen relevant.

Fazit

Die Möglichkeit, die Divi 5 Reihenfolge von Spalten mobil ändern zu können, ist ein echtes Produktivitäts-Upgrade. Kein stundenlanges Rumprobieren mit CSS mehr. Stattdessen: Flexbox einschalten, Order-Werte oder Strukturvorlagen setzen, testen — fertig. Für alle, die regelmäßig Landingpages, Produktseiten oder Member-Bereiche bauen, spart das Zeit und Ärger.

Probier die Einstellungen gezielt an einem Beispiel aus: Richte eine Zeile mit Text, Bild und Button ein und spiele mit Order-Werten. Du wirst sehen, wie schnell das Layout mobil richtig sitzt.

Hier erhältst Du das Divi-Theme mit 10% Rabatt* oder einfach gratis bei einer Neuererstellung Deiner Website.