floating 3 divs in a not logic order

Question

I have some trouble with my website.

I have a contact from which is based on 4 divs posisioned like this:

div 1 is the place where you can fill out your information div 2 is the textarea for your message and a send button div 3 is contact information and div 4 are social media icons.

this all works great. on mobile they're are scaled beneath eachother and it works like a charm.

But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:

so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.

but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:

is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:

here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/

#container{
height:200px;
width:400px;
background:#212121;
}

#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}

#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}

#id3{
height:90px;
width:190px;
background:#fff;
 float: left;
}

#id4{
height:90px;
width:190px;
background:#fff;
 float: left;
}

this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.

Hope anyone can help me out!

Answer 1

If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.

See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)

HTML :

<div id="container">
    <div id="left_wrap">
        <div id="id1">left above</div>
        <div id="id2">left under</div>
    </div>
    <div id="right_wrap">
        <div id="id3">right above</div>
        <div id="id4">right under</div>
    </div>
</div>

CSS (modified)

#left_wrap,#right_wrap{
    width:50%;
    max-width:380px;
    min-width:190px;
    float:left;
}
#container {
    height:100%;
    width:100%;
    background:#212121;
}
#id1,#id2,#id3,#id4 {
    height:90px;
    width:190px;
    background:#fff;
    float: left;
}

Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.

Answer 2

Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.

#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}

#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}

#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}

#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}

#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}