Falsche Responsive-Reihenfolge von Elementen
Für eine abwechslungsreichere Gestaltung werden Elemente auf dem Desktop oftmals in abwechselnder Reihenfolge platziert. Zum Beispiel Bild links – Text rechts und in der nächsten Zeile dann Bild rechts – Text links. Auf dem Smartphone, wo die Elemente allerdings nicht alle in einer Zeile dargestellt werden können, rutschen diese in Divi teilweise von allein in die nächste Zeile. So entsteht ein unschönes Bild. Denn die abwechselnde Reihenfolge auf dem Desktop führt auf Smartphone und Tablet dazu, dass z.B. jeweils zwei Bilder untereinander und dann zwei Texte untereinander dargestellt werden. Also Bild – Text – Text – Bild.
Das Problem mit der falschen Reihenfolge der Elemente in der Responsive Ansicht kann aber ganz einfach behoben werden. Dafür stelle ich Dir zwei Varianten vor, die beide gleichermaßen funktionieren. Vorne weg: Die smartere Variante ist meiner Meinung nach die zweite, bei der ich einen einfachen CSS-Code nutze.
Variante 1: Sichtbare und unsichtbare Elemente (kein CSS notwendig)
1. Zeile duplizieren
Dupliziere die Zeile, die Du für die mobile Ansicht anpassen möchtest.
2. Sichtbarkeit nur auf Desktop
Gehe in die Einstellungen der ersten Zeile unter Erweitert/Sichtbarkeit und deaktiviere Smartphone und Tablet (Das Anklicken des Kästchens bedeutet, dass das Element auf dem entsprechenden Gerät nicht angezeigt wird). Speichere Deine Einstellungen
3. Sichtbarkeit nur auf mobilen Geräten
Gehe dann in das Duplikat der Zeile und tausche die Reihenfolge der Spalten innerhalb der Zeile. Gehe dann unter Erweitert/Sichtbarkeit und deaktiviere den Desktop. Speichere Deine Auswahl.
Diese Variante funktioniert zwar, hinterlässt in Deinem Divi Builder allerdings immer ein Duplikat eines Elements, was natürlich zu einer leichten Unübersichtlichkeit führt. Also habe ich hier eine weitere Variante für Dich, mit der Du das Problem lösen kannst. Und zwar mit einem einfachen CSS-Code.
Variante 2: CSS-Code zum Ändern der Reihenfolge von Elementen
1. CSS zur Zeile hinzufügen
Gehe in die Einstellungen der Zeile, die Du anpassen möchtest unter Erweitert/Benutzerdefinierte CSS. Wähle unter Hauptelement das Smartphone und füge den folgenden CSS-Code ein und speichere Deine Anpassungen:
display: flex;
flex-wrap: wrap;
2. CSS zu den Spalten hinzufügen
Gehe erneut in die Einstellungen der Zeile. Wähle dieses Mal die erste Spalte aus (wo im Beispiel gerade der Text enthalten ist), gehe unter Erweitert/Benutzerdefinierte CSS, wähle unter Hauptelement das Smartphone und füge den folgenden Code ein:
order: 2;
Damit wird bestimmt, dass diese Spalte auf dem Smartphone in der Reihenfolge auf Platz 2 steht. Das selbe machst Du nun mit der zweiten Spalte, nur dass Du dort den folgenden Code einfügst:
order: 1;
Fertig!
Nach dem speichern kannst Du das fertige Ergebnis in der Vorschau ansehen (Wird nicht innerhalb des Divi-Builders angezeigt).