put one div above the other in media queries

问题

So I have two divs, on big screens they are side by side.

<div1> <div2>

On smaller screens, I want to get

<div2>
<div1>

I guess I could remove the float and put width:100% and display:block;. And the two divs are the one above the other, we are half-way there. But how I put the div2 above the div1 ? I tried putting opposite floats, one div floats right, the other left, but no luck.

Is negative margin a legit solution for a responsive web app where everything is fluid? I cannot get the div1 to go under the other, they always overlap. Or there is a more solid solution? Setting display: table-header-group; worked in the fiddle, but not in my project and I dont understand why. Doing it without CSS3 would be awesome.

Here is a fiddle

Thank you

回答1:

I updated your fiddle

I added float:right; to both divs and i changed there order on the page like so:

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

and there is a second version when amir is on top here

回答2:

You just have to swap the position of your HTML Divs as :

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

Here is the fiddle for you

来源：https://stackoverflow.com/questions/38286483/put-one-div-above-the-other-in-media-queries