slevin slevin - 3 months ago 5
HTML Question

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


I guess I could remove the
and put
. And the two divs are the one above the other, we are half-way there. But how I put the
above the
? 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
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


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