Responsive web design scenario - css

Question

I am designing a 3 column web page layout like below.
To make it responsive I specified widths in %, min width in pixels and float:left. Now If I resize the page, all 3 DIVs (1,2, and 3) get resized first then 3rd DIV moves below of 1st DIV. If I resize more then 2nd DIV moves to below of 1st and 3rd moves below to 2nd.
This is because of float property. But I want to modify it in such a way that 3rd DIV should be moved first (as it is already being) then 1st DIV should be moved instead of 2nd DIV. 2nd DIV must be on the top.
How can I do this?

Answer 1

Reordering can be done with Flexbox. You will, however need 1 media query.
http://codepen.io/cimmanon/pen/fwqed
body {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
div {
-webkit-flex: 1 1 20em;
-ms-flex: 1 1 20em;
flex: 1 1 20em;
}
#media (max-width: 40em) {
.a, .c {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
.a {
background: orange;
}
.b {
background: yellow;
}
.c {
background: grey;
}
Reordering can also be done with relative positioning (see: https://stackoverflow.com/questions/16307621/reordering-elements-at-specific-browser-widths).

Answer 2

Sorry I had some missed some details on how it should look earlier, here is another solution with some simple jQuery/javascript:
http://jsfiddle.net/jzxww/4/
This solution has Column 1 move to the bottom instead of to the middle.
Here is the code broken down
function resizeHandlr(){
trigger = $("#superwrap").width(); // get width of wrapper
$("#supersize").html("superwrap size: " + trigger + "px");
if (trigger > 600){
// if greater than 600px, make all widths 33.33% so they are responsive;
} else if ( (trigger < 600) && (trigger > 400)){
// if between 600 and 400px, make top columns 50% and bottom one 100%
// move column1 back to top of wrapper (if coming from < 400px)
} else if (trigger < 400) {
// if wrapper is less than 400px, make all widths 100%
// also MOVE column 1 to the bottom of wrapper
}
}

Answer 3

try this
//css
.left-col{float:left;width:33%}
.right-col{float:right;width:33%}
.main-col{margin: 0 33%}
//html
<div class="left-col"> some text </div>
<div class="right-col"> some text </div>
<div class="main-col"> some text </div>

Answer 4

I got pretty close to a 2,3,1. Check it out: http://jsfiddle.net/3QFaa/
New HTML Markup
<div id="superwrap">
<div id="muahaha">
<div id="col2">2</div>
<div id="col3">3</div>
</div>
<div id="col1">1</div>
CSS
#superwrap { position: relative; width: 100%; background-color: orange; min-width: 200px;}
#muahaha {top: 0px; width:66.66%; float: right; min-width: 200px; }
#muahaha:after {
content: "";
display: table;
clear: both;}
#col2, #col3 { float: left;}
#col1 { background-color: cyan; width: 33.33%; min-width: 200px;}
#col2 {background-color: yellow; width: 50%; min-width: 200px;}
#col3 { background-color: green; width: 50%; min-width: 200px;}
Thanks #sebastianG for the fiddle.
Only problem with this is, as you notice, col1 does not drop until it hits the very far right edge of #superwrap
Another nearly-perfect version:
If col1 does not have to be centered immediately:
http://jsfiddle.net/XDTEW/
Added float: left to col1
I also think you will be better using #media queries for different screen size scenarios.