CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
slevin
slevin

Reputation: 3888

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

Upvotes: 1

Views: 1449

Answers (2)

Shlomi Haver
Shlomi Haver

Reputation: 974

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

Upvotes: 3

vinayofficial
vinayofficial

Reputation: 482

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

Upvotes: 4

Related Questions