Search code examples
htmlcssresponsive-designmedia-queries

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

Solution

  • 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