3 column ordering of div's

[beanymanuk]

Hi

 

I am trying to get a column layout to display 3 divs in different order depending the screen width using media queries

 

<div class="slot-0-1 feature homedrawdate">
<div class="block"><h2>Open for entries in</h2></div>
<div class="block">Sign up with facebook</div>
</div>

<div class="slot-2-3 feature homeimage">
<div class="block"><h2>Product Image</h2></div>
</div>

<div class="slot-4-5 feature">
<div class="block">
	<h2>Draw info</h2>
</div>			
</div>

 

when screen width is above 720px width I want the blocks to display in order they are above from left to right.

But when screen width is below 720px I want the middle div to display first, then the first once then the last one staying last.

 

ie Product Image - Open for entries in .. - Draw Info

 

Anyone got any suggestions of how I can achieve this?

[noober]

It's a shot in the dark, because I haven't done much with responsive design, but I would guess you wouldn't be able to accomplish this with css alone. You will probably need some javascript.

[BuildMyWeb]

It's a shot in the dark, because I haven't done much with responsive design, but I would guess you wouldn't be able to accomplish this with css alone. You will probably need some javascript.

 

agreed.