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

Beitrag lesen

Hallo,

ich arbeite mich gerade etwas tiefer in HTML5 und CSS ein und habe eine Frage, die ich bisher nicht lösen konnte. Ist es möglich, eine Box je nach Displaygröße an einer ganz anderen Stelle der Webseite anzuzeigen?

Beispiel:

Ich habe für große Displays ein zweispaltiges Design. Rechts ist der Hauptinhalt, links daneben mittels float:left die Navigation und unter der Navigation ein Feld mit Kontaktdaten. Die .html Datei ist folgendermaßen aufgebaut:

<nav> 
</nav>
<div id="kontakt">
</div>
<main role="main"> 
</main

So soll es für große Displays aussehen:

---------------
- NAVI - MAIN -
- NAVI - MAIN -
- ---- - MAIN -
- MAIL - MAIN -
- MAIL - MAIN -
-------- MAIN -
-------- MAIN -
- F o o t e r -
---------------

So soll es für kleine Displays aussehen:

------------
--- NAVI ---
--- NAVI ---
------------
--- MAIN ---
--- MAIN ---
--- MAIN ---
--- MAIN ---
--- MAIN ---
--- MAIN ---
--- MAIN ---
------------
--- MAIL ---
--- MAIL ---
------------
-- Footer --
------------

Das mit dem Navigationsmenü ist kein Problem. Ich nehme einfach float:left für kleine Displaygrößen raus und das Menü wandert nach oben. Mein Problem ist das Kontaktfeld. Wie bekomme ich das unter den Text?

Gruß Martin