Div Box an unterschiedlichen Stellen anzeigen je nach Displaygröße

[Gunnar Bittersmann]

@@MrMurphy1

Eine aktuelle Lösung mit dem CSS3 Grid Layout oder Flexbox, die in hinreichend vielen Browsern funktioniert, gibt es für dein Problem leider nicht.

Ach was‽ Wirklich nicht?

"kenne ich nicht" ≠ "gibt es nicht".

Problematisch an der Umsortierung könnte sein, dass die Elemente im Hauptinhalt in der Tab-Reihenfolge vor denen im Kontaktfeld kommen, obwohl ein Nutzer (mit breitem Viewport) das aufgrund der visuellen Darstellung vielleicht anders erwarten würde.

Das Kontaktfeld (bei mir in einem aside-Element)

address wäre angebracht.

<nav role="navigation">

<main role="main">

<footer role="contentinfo">

All diese role-Attribute sind nicht angebracht. Diese Elemente haben schon diese Rollen; dann sollten sie nicht noch mal angegeben werden.

@media all

Wozu soll das gut sein?

@media only screen and (max-width: 800px)

Wozu soll only screen gut sein?

Media queries sollten in em angegeben werden, nicht in px.

audio, video { display: block; }

Inline-Elemente global als Block zu formatieren ist auch nicht unbedingt die beste Idee.

LLAP 🖖