Mobile Detect, Media Queries oder was anderes?

[dazzle89]

Hallo zusammen,

ich möchte den Inhaltsbereich einer Seite mobil anders darstellen als auf dem Desktop.

In der Desktopansicht gibt es zwei Spalten, die linke hat ein Hauptbild und darunter eine Galerie. In der rechten Spalte sind verschiedene Texte, Buttons, ein Video.

In der mobilen Ansicht sollen diese Elemente in der Reihenfolge ziemlich vermischt werden (Bild -> Texte -> Video -> Galerie erst am Ende).

Wie würdet ihr vorgehen?

Ich sehe zwei Möglichkeiten, entweder eine Mobile Detect Lösung.

Oder ich erstelle für beide Ansichten ein eigenes HTML mit eigener Klasse und blende dann mittels Media Queries immer nur das entsprechende HTML ein. Hier sehe ich aber als Problem, dass alle Inhalte dann doppelt geladen werden?

Welche Lösung macht mehr Sinn oder gibt es noch ganz andere Möglichkeiten bei Contao?

Vielen Dank im Voraus.

[Spooky]

Warum Mobile Detect? Einfach ganz normale Media Queries auf den Viewport.

[dazzle89]

Wahrscheinlich denke ich wieder zu kompliziert.

Das Problem ist für mich die Reihenfolge der Elemente. In der mobilen Ansicht soll alles untereinander dargestellt werden, und der Text und das Video aus der rechten Spalte sollen zwischen dem Hauptbild und der Galerie der linken Spalte sitzen. Daher würde ich für beide Ansichten jeweils ein DIV schreiben mit der gewünschten HTML Reihenfolge schreiben und mit Media Queries ein- und ausblenden, befürchte aber dass alle Inhalte dann 2 mal geladen werden.

Wobei ich gerade überlege, ob es ich mit Flexbox und order-Anweisungen irgendwie hinbekommen könnte...

[mlweb]

Sehe ich genauso wie @Spooky.
Gerade modernes CSS bietet so viele Möglichkeiten auch für eine veränderte Reihenfolge. Manche Dinge gehen zum Teil fast ohne Media Queries.

[Spooky]

Wahrscheinlich denke ich wieder zu kompliziert.

Das Problem ist für mich die Reihenfolge der Elemente. In der mobilen Ansicht soll alles untereinander dargestellt werden, und der Text und das Video aus der rechten Spalte sollen zwischen dem Hauptbild und der Galerie der linken Spalte sitzen. Daher würde ich für beide Ansichten jeweils ein DIV schreiben mit der gewünschten HTML Reihenfolge schreiben und mit Media Queries ein- und ausblenden, befürchte aber dass alle Inhalte dann 2 mal geladen werden.

Wobei ich gerade überlege, ob es ich mit Flexbox und order-Anweisungen irgendwie hinbekommen könnte...

Reihenfolge ändern kannst du nur mit Flex oder Grid (von deiner Duplzierungs-Lösung abgesehen).

[dazzle89]

Ich versuche es nochmal zu veranschaulichen

Desktop:

Linke Spalte:
- Hauptbild
- Galerie

Rechte Spalte:
- Text
- Video

Mobil:

Alles untereinander!

- Hauptbild
- Text
- Video
- Galerie

Wäre das mit Flexbox und order möglich? Flexbox-Parent wäre in diesem Fall der Container der beiden Spalten. Und wirkt sich order dann nicht nur auf die beiden Children, also Spalten, aus?

[Spooky]

Ja, das geht: https://codepen.io/fritzmg/pen/rNEYWqL

[dazzle89]

Perfekt, danke für die schnelle Hilfe