Mit wenigen Zeilen CSS die Spaltenreihenfolge in Avada umkehren

Ein mehrspaltiges Design kann schnell zu einigem Kopfkratzen führen, sobald es an die mobile Version einer Webseite geht. Steht in der Desktop-Version einer Seite links ein Bild und rechts der dazugehörige Text, erhält man in der mobilen Version dieser Seite ein wenig hilfreiches Ergebnis: Zuerst erscheint das aus dem Kontext genommene Bild, und erst dann folgt der Text, den es illustrieren soll. Sinnvoll wäre die genau umgekehrte Reihenfolge. Aber: Wie macht man das, dass ab einer bestimmten Displaygröße die linke Spalte zur unteren, die rechte dagegen zu oberen Zeile wird?

Klassischer Ansatz: Adaptives Design

Screenshot Avada

Die Funktion „Container Visibility“ steuert in Avada die Anzeige von Containern bei verschiedenen Displaygrößen.

In Avada bietet es sich an, einen zweiten Container mit identischem Inhalt, jedoch mobilem Layout zu erstellen und diesen mithilfe der Funktion „Container Visibility“ nur auf bestimmten Displaygrößen anzeigen zu lassen. Dies erhöht allerdings erheblich den Arbeitsaufwand beim Erstellen und Pflegen der Website und stellt obendrein eine mögliche Fehlerquelle beim Aktualisieren des Inhalts dar. Eleganter und zeitsparender wäre es, diese Spaltenumkehr zu automatisieren.


Eleganter Ansatz: CSS

Diese Umkehr der Spaltenreihenfolge lässt sich – nicht nur in Avada – prima mit CSS und Flex realisieren:

1. Gib dem übergeordneten Container die Klasse .spalten_tauschen und füge folgendes ins CSS ein:

@media screen and (min-width: 320px) {
    .spalten_tauschen .fusion-row { display: flex; flex-flow: column; }
    .spalten_tauschen .fusion-row .fusion-builder-column-2 { order: 1}
    .spalten_tauschen .fusion-row .fusion-builder-column-1 { order: 2}
}

Dann kehrt sich die Reihenfolge der Spalten in der Mobilansicht um. Um diese Umkehr dann in größeren Displays wieder aufzuheben, machst Du folgendes:

@media screen and (min-width: 1260px) {
    .spalten_tauschen .fusion-row { display: flex; flex-flow: row; }
    .spalten_tauschen .fusion-row .fusion-builder-column-2 { order: 2}
    .spalten_tauschen .fusion-row .fusion-builder-column-1 { order: 1}
}

So sparst Du Zeit beim Designen und Deine Kunden beim Pflegen des Inhaltes. Außerdem eliminierst Du zahlreiche potenzielle Fehlerquellen im laufenden Betrieb der Website.