Responsive Layout – Div Position Priority

[itsmekgaurav]

Hi All…

I have created a responsive layout where in large screen div’s will be aligned one after the other.
For ex – [Div 1] [Div 2] [Div 3].

But when I reduce the screen size to mobile size. I want div’s to be placed by my given priority.
For ex – [Div 2]
[Div 1]
[Div 3]

Let me know if you need more clarity…

Please help me in solving this… it will be a great help.

Thanks guys! Have a nice day ahead.

[daffy58]

Is this help?

http://codepen.io/anon/pen/nbHEh

[vipin10agarwal]

<style>
.main_div{ width:1000px; display:inline-block; height:auto; position:relative;}
.main_div .a{width:300px; height:200px; background:red; float:left;}
.main_div .b{width:300px; height:200px; background:green; float:left;}
.main_div .c{width:300px; height:200px; background:blue; float:left;}
@media handheld, only screen and (max-width:480px){

.main_div .a{ float:none; position:absolute; top:400px;}

.main_div .b{float:none; position:absolute; top:0px;}
.main_div .c{float:none; position:absolute; top:200px;}

}

</style>

<div class=”main_div”>
<div class=”a”>hklhfd</div>
<div class=”b”></div>
<div class=”c”></div>
</div>

[vipin10agarwal]

http://codepen.io/vipin789/pen/diBmc

[Author]

Posts