responsive #left vor #main

[dr39]

Guten Abend,

mein Ziel ist es, ab dem Contao-Breakpoint (767px), den linken Container (wichtiger Inhalt!) vor dem #main darzustellen. Mit absoluter Positionierung klappt das natürlich, nur ist es empfehlenswert? Welche bessere Lösung bietet sich an?
Das orig. Template soll nicht verändert werden.

Eine weitere Möglichkeit wäre es, einen eigenen Layoutbereich (mit dem wichtigen Inhalt) ab dem Breakpoint im #main-Container (oder im #header) ein-und die linke Spalte auszublenden. Wie sinnvoll wäre das?

Contao: 3.5.6
2-Spalten Layout
Layout-Builder: On
Contao-Responsive: On
CSS-Reset: On


Schönes We @all

[Samuell]

Das "Standardverhalten" sieht "main" als wichtigen Inhalt, da es der Content ist.
Aus diesem Grund wurde alles so eingerichtet, dass Main als erstes steht.

Spontan fallen mir drei Wege ein wie Du das ändern kannst:

1. fe_page und layoutbuilder anpassen, was viel Arbeit ist.

2. CSS flexbox nutzen und das Standardverhalten als Fallback setzen.

3. Den Inhalt aus "main" standardmäßig mit position Absolute in die Seitenleiste schieben und dieses Verhalten später wieder aufheben.
Je nach Layout und Anforderungen kann das eine oder das Andere Vorgehen besser passen

[Andreas]

Mit JS #left vor #main positionieren (DOM-Manipulation).

[tab]

mein Ziel ist es, ab dem Contao-Breakpoint (767px), den linken Container (wichtiger Inhalt!) vor dem #main darzustellen. Mit absoluter Positionierung klappt das natürlich, nur ist es empfehlenswert? Welche bessere Lösung bietet sich an?
Das orig. Template soll nicht verändert werden.

Eine weitere Möglichkeit wäre es, einen eigenen Layoutbereich (mit dem wichtigen Inhalt) ab dem Breakpoint im #main-Container (oder im #header) ein-und die linke Spalte auszublenden. Wie sinnvoll wäre das?

Wie passt das zusammen? Bzw, was meinst du mit orig. Template soll nicht verändert werden? Dass es mit absoluter Positionierung klappt sehe ich auf den ersten Blick erst mal nicht. Lösungsweg 1 von Samuell sehe ich nicht als besonders aufwändig an. In der fe_page besteht die Änderung lediglich darin, die entsprechenden Ausgaben von #left und #main in die "natürliche" Reihenfolge zu bringen. Und im CSS sollte es mit Überschreiben einiger weniger Styles erledigt sein. Habe jetzt gerade keine passende Testinstallation verfügbar, aber viel kann es wirklich nicht sein. Ich erinnere mich auch dunkel, dass es einige Beiträge hier im Forum gab aus der Zeit des Übergangs von Contao 2 zu Contao 3, wo das im Detail beschrieben wurde.

Edit: Bestimmt gibt es auch ein halbes Dutzende Lösungsansätze unter Verwendung von jQuery.
Edit2: LOL, den ersten hat Andreas ja schon geliefert.