Naja, die Anordnung hab ich vom Layout Editor von hier: https://www.html-seminar.de/css-layout-generator.htm

Ich glaub aber auch inzwischen mehr als 2 Spalten macht nicht so wirklich Sinn.
Mit der Nav hast du recht. Hab mir verschiedene Responsiv Designs angesehen und es im Test einfach "kopiert". Aber Auf nem kleinen Display will glaub ich keiner so einen großen Klotz am oberen Rand haben.
Btw - ich hab mir mal mal Responsive Tables angesehen und da gibts einige schöne Bsp.
Allerdings war mit da "zuviel jQuery" oder un-dynamisches Gespiele drin. Hab mich dann an divs erinnert: div display:table
Und die Idee war ganz einfach jeder tr ein hidden Label mitzugeben.
Das klappt auch. Nur fehlt mir da eine Art Trigger der ein Overflow erkennt.
Hier mal das Bsp für nen Table: http://vertex.selfhost.bz/responsive/
Wie könnte man denn den Overflow handlen? (JS?)
EDIT: nach längerem Suchen muss ich feststellen:
Alles rund um Responsive Design läuft darauf hinaus eine feste Grenze zu setzen.
Ab dieser Grenze wird "umgebaut".
Das mag beim Layout nicht "auffallen". Bei Tables allerdings sehr schnell.
Ich mag die Idee von Responsive Design. Aber nachdem was ich alles gelesen hab versuchen sich alle die "beste Grenze" zu basteln.
Die grenze für Tablet, smartphone, und viele gehen sogar nach bestimmten Geräten wie zB iphone.
Das gibt 3 oder mehr CSS Varianten für alles, was da aufm Bildschirm rumhängt (Bilder, Table, Text, Videos, ...).
Btw Tables:
Jedes, aber auch wirklich JEDES Beispiel im netz zeigt Resp.Tables "in best case". Fail!
Kein einziger Zeigt mal was passiert, wenn die Tabelle mal mehr "im Kasten" hat. Wen zB ein Benutzer einen sehr langen Namen nutzt, und evtl noch eine lange eMail-Adresse. Dann ist nämlich nix mit "umbauen".
Die Feste Grenze steht, aber ist noch nicht erreicht und wir sind zB noch auf der Tablet Variante - >Table hängt über.
Oder im Falle die Tabelle hat mal wenig Daten und wir sind im Bereich Smartphones gelandet - dann gibts "schön" umgewandelte Tabellen mit 80% Nix.
Also mMn geht es nicht ohne JS. Ein "onOverflow" Event gibt es wohl nicht. Aber ich hab mich an mein erstes JS erinnert - der TS3-Container.
Werd mal versuchen das Ganze so umzugestalten, dass ein Table "on overflow" umschaltet.