Bild links, Text rechts, in der nächsten Zeile andersrum: Am Desktop sieht so ein Zickzack-Layout richtig gut aus. Auf dem Handy stehen dann aber plötzlich zwei Texte direkt untereinander, und das Bild hängt irgendwo dazwischen. Die Frage, die dann jeder googelt: Wie kann ich in Divi die Reihenfolge ändern, nur fürs Handy?
Die gute Nachricht: In Divi 5 geht das ohne eine Zeile Code. Seit Divi 5 laufen Zeilen mit Flexbox und auf Wunsch mit CSS Grid, und beides bringt Einstellungen für die Reihenfolge mit. Ich zeige dir, wann du Flex und wann Gitter nimmst, wo Spaltenbreiten und Abstände sitzen und wie du die Spalten auf dem Handy umsortierst. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand November 2026.
Flex, Gitter oder Block: was ist der Unterschied?
Jede Zeile hat in Divi 5 einen Layout-Stil. Drei stehen zur Wahl:
| Layout-Stil | So verhalten sich die Spalten | Gut für |
|---|
| Flex (Vorgabe) | stehen nebeneinander in einer Reihe, jede Spalte kann eigene Breite haben | Text neben Bild, Inhalt neben Seitenleiste, fast alles |
| Gitter | ordnen sich in ein Raster mit festen Spalten und mehreren Reihen | Karten, Teams, Beitragslisten, Galerien |
| Block | stehen einfach untereinander | Sonderfälle, wenn kein Layout gebraucht wird |
Meine Faustregel: Bleib bei Flex, solange es eine Reihe ist. Sobald du ein Raster mit gleich großen Kacheln willst, die automatisch in die nächste Reihe rutschen, nimm Gitter.
Wo du das Layout einstellst
Fahr mit der Maus über die Zeile und klick in der grünen Leiste auf das Zahnrad. Im Einstellungsfeld „Zeile“ wechselst du in den Reiter „Design“. Ganz oben steht die Gruppe „Layout“.
Die Gruppe „Layout“ der Zeile im Stil „Flex“Die Symbolknöpfe haben keine Beschriftung. Wenn du mit der Maus darüberfährst, verrät ein Tooltip, was sie tun:
- Layout-Richtung: „Zeile“, „Zeile Umkehren“, „Spalte“, „Spalte Umkehren“
- Inhalt Ausrichten: „Anfang“, „Zentriert“, „Ende“, „Abstand Dazwischen“, „Abstand Drumherum“, „Gleichmäßiger Abstand“
- Elemente Ausrichten: „Anfang“, „Zentriert“, „Ende“, „Strecken“, „Grundlinie“. Mit „Zentriert“ sitzt ein kurzer Text mittig neben einem hohen Bild.
- Layout-Umbruch: „Kein Umbruch“, „Umbruch“, „Umgekehrter Umbruch“
Spaltenbreiten und Abstände
Den Abstand zwischen den Spalten stellst du direkt in der Gruppe „Layout“ ein. „Horizontaler Abstand“ ist die Lücke zwischen Spalten nebeneinander, „Vertikaler Abstand“ die zwischen Reihen. Bei Flex stehen grau die Vorgaben 5.5 % und 40 px, beim Gitter jeweils 60 px.
Die Breite einer einzelnen Spalte legst du dagegen an der Spalte selbst fest, unter „Design“, „Größe Einstellen“. Wie das genau geht und warum die Nachbarspalte nicht von selbst nachrückt, steht in meiner Anleitung Spaltenbreite in Divi 5 ändern. Und wenn sich Spalten gezielt überlagern sollen, hilft dir Spalten überlappen in Divi 5.
Wann das Gitter besser passt
Stellst du „Layout-Stil“ auf „Gitter“, ändern sich die Felder. Wichtig sind vor allem diese:
- „Anzahl Der Spalten“: wie viele Kacheln nebeneinander stehen. Alles darüber rutscht in die nächste Reihe.
- „Spaltenbreiten“: Vorgabe ist „Spalten Mit Gleicher Breite“. Daneben gibt es Mindestbreite, feste Breite, automatische und manuelle Breite.
- „Zeilenhöhen“: zum Beispiel „Zeilen Mit Gleicher Höhe“, damit alle Kacheln gleich hoch sind.
Wer lieber zeichnet als tippt, klickt auf „Grid-Editor öffnen“. Über dem Canvas erscheint ein dunkles Fenster mit dem Raster. Die Spalten haben dort Breiten in „fr“, also Anteile am freien Platz, links und rechts sitzen Knöpfe mit „-“ und „+“. Darüber stehen die Felder für Spalten, Zeilen und Abstände. Kleiner Lacher am Rande: Das Feld für die Spalten heißt im Editor „Säulen“.
Der Grid-Editor zeigt das Raster der Zeile, hier zwei Spalten zu je 1 fr.Achtung, Handy-Falle: Ein Gitter behält seine Spaltenzahl auch auf kleinen Bildschirmen. In meinem Test mit drei Spalten war jede Kachel auf dem Handy nur 64 Pixel breit. Stell in der Telefon-Ansicht (dazu gleich mehr) die „Anzahl Der Spalten“ auf 1. Ein Beispiel mit Beitragskarten findest du in meiner Anleitung zum Loop Builder in Divi 5.
Reihenfolge am Handy ändern: das Problem
Auf dem Handy stapelt Divi die Spalten einer Flex-Zeile untereinander, und zwar in der Reihenfolge, in der sie am Desktop von links nach rechts stehen. Bei meinem Zickzack heißt das: In der ersten Zeile kommt erst das Bild, dann der Text. In der zweiten Zeile kommt erst der Text, dann das Bild.
Um das zu sehen, klickst du oben in der Leiste auf das Gerätesymbol „Telefon“. Der Canvas wird schmal und zeigt die Handy-Ansicht.
Vorher: Am Handy folgt Text auf Text, das zweite Bild steht ganz unten.Alles, was du jetzt einstellst, gilt nur für das Handy. Der Desktop bleibt, wie er ist. Für diesen Fall gibt es zwei Wege.
Weg 1: „Spalte Umkehren“ an der Zeile
Dieser Weg dreht die ganze Zeile um, egal wie viele Spalten sie hat.
- Bleib in der Telefon-Ansicht und öffne die Zeile, deren Reihenfolge falsch ist, über ihr Zahnrad.
- Reiter „Design“, Gruppe „Layout“. Oben rechts im Einstellungsfeld zeigt ein kleines Handy-Symbol, dass du gerade die Handy-Werte bearbeitest.
- Bei „Layout-Richtung“ klickst du auf das vierte Symbol, „Spalte Umkehren“.
Nachher: Mit „Spalte Umkehren“ steht das Bild über dem Text.Der Canvas springt sofort um. Wechsel zurück auf das Desktop-Symbol, prüf kurz, dass dort alles beim Alten ist, und klick auf „Speichern“. Live habe ich nachgemessen: Bei 390 Pixeln Breite steht das Bild oben, bei Tablet- und Desktop-Breite stehen Text und Bild weiter nebeneinander wie vorher.
Übrigens ist „Layout-Stil“ in der Handy-Ansicht ausgegraut. Flex oder Gitter wählst du einmal für alle Geräte.
Weg 2: „Anzeigereihenfolge“ an der Spalte
Der zweite Weg setzt an einer einzelnen Spalte an. Das ist praktisch, wenn eine Zeile drei oder vier Spalten hat und du nur eine davon nach vorne holen willst.
- Telefon-Ansicht einschalten.
- Ein Modul in der Spalte öffnen, die nach oben soll, und im Pfad oben im Einstellungsfeld auf „Spalte“ klicken.
- Reiter „Inhalt“, Gruppe „Auftrag“. Ja, die heißt wirklich so, das englische „Order“ wurde falsch übersetzt.
- Bei „Anzeigereihenfolge“ trägst du
-1 ein und drückst die Tabulatortaste.
„Anzeigereihenfolge“ -1 holt die Spalte am Handy nach vorne.Das Prinzip: Alle Spalten haben ohne Eintrag den Wert 0. Eine kleinere Zahl kommt zuerst, eine größere später. Statt das Bild auf -1 zu setzen, könntest du also auch den Text auf 1 setzen. Live geprüft: Am Handy steht das Bild oben, am Desktop bleibt es rechts.
Das Ergebnis auf dem Handy: überall erst Bild, dann TextWelcher Weg ist der bessere?
Bei zwei Spalten ist es fast egal. Ich nehme dann „Spalte Umkehren“, weil es ein einziger Klick an der Zeile ist und man es später schneller wiederfindet. Bei drei oder mehr Spalten, oder wenn nur eine Spalte springen soll, ist die „Anzeigereihenfolge“ genauer.
Zwei Dinge solltest du dir merken:
- Immer in der richtigen Ansicht arbeiten. Was du in der Desktop-Ansicht änderst, gilt für alle Geräte. Schau vor dem Klicken auf das Gerätesymbol oben.
- Die Reihenfolge im Quelltext bleibt. Beide Wege ändern nur, was man sieht. Screenreader und die Tab-Taste folgen weiter der ursprünglichen Reihenfolge. Bei Bild und Text ist das unkritisch, bei Formularen oder Menüs würde ich es vermeiden.
Wie du Zeilen sonst noch anpasst, etwa Hintergrund und Innenabstand, zeigt meine Anleitung Zeilen in Divi 5 bearbeiten. Und falls du Divi noch nicht hast: Preise und Lizenzen findest du bei Elegant Themes (Werbung).
