In der mobilen Ansicht eines Webdesigns ist die Reihenfolge der Inhalte entscheidend für die Nutzererfahrung. Was auf dem Desktop nebeneinander dargestellt wird, erscheint auf dem Smartphone meist untereinander – und oft genau in der falschen Reihenfolge.
Gerade bei zweispaltigen Layouts mit Text und Bild möchtest du vielleicht, dass zuerst das Bild und dann der Text angezeigt wird – oder umgekehrt.
In diesem Codeschnipsel zeige ich dir, wie du mit CSS (Flexbox) die Spaltenreihenfolge gezielt für Mobilgeräte anpassen kannst – ganz ohne zusätzliche Plugins.
Diese Lösung ist besonders nützlich, wenn du:
- die mobile User Experience verbessern möchtest,
- Layouts gezielt für verschiedene Bildschirmgrößen optimieren willst,
- oder gestalterisch mehr Kontrolle über die Reihenfolge deiner Inhalte brauchst.
Spaltenreihenfolge für Mobilgeräte umkehren:
1. Öffne die Einstellungen der zu bearbeitenden Reihe (Türkis) und füge unter Erweitert > CSS-ID & Klassen die CSS-Klasse .dt-spaltenreihenfolge-mobil-umkehren hinzu
2. Füge folgendes CSS-Codeschnipsel im Divi Custom CSS-Bereich oder im Stylesheet deines Child-Themes hinzu:
/*Divi Spaltenreihenfolge auf mobilen Endgeräten umkehren*/
@media (max-width:980px) {
.dt-spaltenreihenfolge-mobil-umkehren {
display:flex;
flex-direction:column-reverse;
}
.dt-spaltenreihenfolge-mobil-umkehren .et_pb_column {
margin-bottom:30px !important;
}
.dt-spaltenreihenfolge-mobil-umkehren .et_pb_column:first-child {
margin-bottom:0 !important;
}
}Und fertig!
Du hast nun erfolgreich die Spaltenreihenfolge auf mobilen Endgeräten umgekehrt.
Wenn dir das Codeschnipsel weitergeholfen hat, freue ich mich über einen kurzen Kommentar unten im Kommentarfeld!
