slevin slevin - 4 months ago 10
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

<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

Answer

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

Comments