Responsive Seitenlayout oder nur CSS?

Hallo,

ich hätte mal eine Verständnisfrage bzgl. Responsive-Design:

Anbei eine Skizze, die mein Vorhaben zeigen soll.

Ab eine bestimmten Bildschirmbreite soll die Navigation nicht mehr links, neben dem Content, sondern überhalb das Contents angezeigt werden.

Macht man das dann nur mit Media Queries oder kann ich z.B. ein weiteres Seitenlayout anlegen und irgendwie sagen, wenn die Breite kleiner 1.200px, dann ist die Navigation nicht mehr in "left", sondern im "header"?
Sollte das nicht gehen, wie gehe ich dann genau vor?

Lege ich dann eine weitere CSS-Datei mit dem Media Query an und sage: Wenn Breite kleiner als 1.200 px, dann "left" nicht mehr links, sondern oben. -> Das würde das generelle Layout ja dann komplett durcheinander bringen, weil "left" nicht mehr left ist, sondern auf einmal der Header...

Ich hoffe man versteht, was ich in etwa meine...


Viele Grüße,
El

Generell ist das ja mit Media Querys möglich.
Beispielsweise wäre wenn die Navi links wäre float:left, wenn sie dann bei kleineren Layouts darüber liegen würde, nimmst du einfach das float raus.
Schon wäre die Navi dann über statt links neben dem Content.

Bei Contao 3 kannst du allerdings soweit ich gesehen habe extra Layouts für mobile Seitenansicht anlegen.

Schau dir beispielsweise mal das CSS Framework LESS an http://lessframework.com/#how

Kann das wer bestätigen mit den extra Layouts bei Contao 3? Das wäre natürlich klasse!

Schau dir einfach mal die Beta der Version 3 an, da wirst du es sehen ;)

EDIT:

Auszug aus dem Changelog für 3.0 http://contao.org/de/changelog/versions/3.0.html

Zitat:

---

Changed
New approach to handle mobile devices: instead of redirecting to another website root page, you can now define a separate layout for mobile pages. This allows us to re-use the existing site structure and content and to leave out (or include) certain modules, scripts and style sheets if a visitor uses a mobile device.

---