setzen Sie ein div über dem anderen in Medienabfragen

Question

So habe ich zwei divs, auf großen Bildschirmen sind sie nebeneinander.

<div1> <div2> 

Auf kleineren Bildschirmen, möchte ich

<div2> 
<div1> 

bekommen Ich glaube, ich könnte die float entfernen und setzen width:100% und display:block;. Und die beiden Divs sind übereinander, wir sind auf halbem Weg. Aber wie stelle ich die div2 über die ? Ich habe versucht, gegenüberliegende Floats zu setzen, ein Div schwimmt nach rechts, der andere links, aber kein Glück.

Ist die negative Marge eine legitime Lösung für eine responsive Web-App, in der alles flüssig ist? Ich kann nicht die div1 unter die andere gehen, sie überlappen sich immer. Oder gibt es eine festere Lösung? Einstellung display: table-header-group; arbeitete in der Geige, aber nicht in meinem Projekt und ich verstehe nicht warum. Ohne CSS3 wäre es großartig. Hier

ist ein fiddle

Danke

Answer 1

I aktualisiert Ihre fiddle

Ich habe float:right; zu beiden divs und ich dort geändert, um auf der Seite wie folgt:

<div id="amir">amir</div> 
<div id="jake">jake</div> 

und es gibt eine zweite Version, wenn Amir oben ist here

Answer 2

Sie müssen nur die Position Ihrer HTML-Div-Tags tauschen:

<div id="amir">Amir</div> <div id="jake">Jake</div>

Hier sind die fiddle for you