html - 2 column responsive layout with variable sized and positioned elements -

html - 2 column responsive layout with variable sized and positioned elements -

i want accomplish kind of responsive layout set blocks in right order. it's easy if utilize grid , allow whole right column go under left single column, want create single blocks distributed in right order.

here's how should on big screen (2-column):

and here's how should on smaller screen (1-column):

the blocks aligned:

1 & 4 = left 2 & 3 = right 5 & 6 = center

all blocks have different width&height (random) , want accomplish kind of positioning - , 1 time 1 time again - block order important. (the column widths on big screen same.. sketched bit fast)

i tried accomplish different html & css markup failed every time. experimented javascript reorders boxes in dom had problems, since boxes contain other javascripts , codes failed execute after dom has been modified.

so looking simplest solution, preferably using html+css , no javascript if possible.

managed using masonry.

html:

<div id="wrapper"> <div style="margin-top:0px; text-align: left"><div style="width:70%;height: 200px">1</div></div> <div style="margin-top:50px; text-align: right"><div style="width:80%;height:170px">2</div></div> <div style="margin-top:50px; text-align: right"><div style="width:60%">3</div></div> <div style="margin-top:50px; text-align: left"><div style="width:40%; height:150px">4</div></div> <div style="margin-top:50px; text-align: center"><div style="width:60%">5</div></div> <div style="margin-top:50px; text-align: center"><div style="width:80%;height:100px">6</div></div> </div>

css:

#wrapper { width: 100%; max-width: 800px; } #wrapper > div { width: 40%; max-width: 350px; } #wrapper > div > div { display: inline-block; text-align: center; padding: 50px 0; background: #000; color: #fff; }

javascript (using jquery):

$(document).ready(function() { $("#wrapper").masonry({ columnwidth: 380, gutter: 20 }); });

example can found @ http://jsfiddle.net/sinusiks/w99te/4/

html css responsive-design