Flexbox-Layout responsiv ohne Media-Queries

Article: Inhalt

Sections: Karten im Wrapper .cards

Bild

Karte 1: Titel

Diese Karten erscheinen je nach Breite des Viewports in 4 unterschiedlichen Anordnungen.

Sehr breit: 3 Karten nebeneinander, jede Karte einspaltig.

Bild

Karte 2: Titel

Bei weniger breitem Viewport: Oben 2 Karten nebeneinander einspaltig, darunter 1 Karte zweispaltig.

Bei mittlerer Breite: Alle Karten übereinander, zweispaltig.

Bild

Karte 3: Titel

In sehr schmalem Viewport wird alles einspaltig dargestellt.

Section: Titel

Weitere Sections nach Bedarf.