Dreispaltiges Layout mit Flexbox und zwei Media Queries

[Rolf B]

Hallo Bimmelbeule,

wenn der Zug nicht ankommt, ist ein Wechsel wohl unumgänglich.

Aber - ankommen kann man schon.

https://jsfiddle.net/Rolf_b/cfrbyq94/

Wie Gunnar schrieb, braucht man die Navi zweimal, damit die DOM Reihenfolge mit der Tab-Reihenfolge übereinstimmt.

Und damit die "Unten" Navigation für Screenreader-User erreichbar ist, habe ich noch einen "Skip To Nav" Link an den Anfang gesetzt, der im 65em Modus auf display:none gesetzt wird - dann ist die Top-Navi aktiv und man braucht ihn nicht. EVENTUELL braucht man dann ersatzweise einen "Skip to Main" Link.

Damit es funktioniert, braucht man zwei Flexboxen. Eine innere Flexbox für Haupttext und Aside, und eine äußere, um bei Bedarf die Navigation davorstellen zu können.

Ich glaube, dass Grid logischer ist.

Rolf