Responsive Web Design Script

Question

I am developing a page layout with three columns as shown below.

To make it responsive, I specified the width in%, the minimum width in pixels, and float:left . Now, if I resize the page, all 3 DIVs (1,2 and 3) first change, then the 3rd DIV moves below the 1st DIV. If I resized more than the 2nd DIV, the transition below the 1st and 3rd moves is lower by the 2nd.

This is due to the float property. But I want to change it so that the 3rd DIV should be moved first (as it already is), then the 1st DIV should be moved instead of the 2nd DIV. 2nd DIV should be on top.

How can i do this?

Answer 1

Sorry, I missed some details about how this should look before, here is another solution using simple jQuery / javascript:

http://jsfiddle.net/jzxww/4/

This solution has column 1 moving from the bottom, not the middle.

Here is the broken code

 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 2

Reordering can be done using Flexbox. However, you will 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 3

try it

//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> 

code>

Answer 4

I came pretty close to 2,3,1. Check this 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 violin.

Only problem with this is that, as you noticed, col1 does not fall until it reaches the far right edge of #superwrap

Another almost perfect version:

If col1 does not need to be centered immediately: http://jsfiddle.net/XDTEW/

Added float: left to col1

I also think that you would be better off using @media queries for different screen size scenarios.