ind ind - 4 months ago 21
HTML Question

Three columns div layout design with adjustable

I want to know how to to design three column div layout with adjustable in deference sizes like showing in image.

enter image description here


  • When desktop size (770px) first column have two div and others have one divs.

  • When tablet size (600px) first column have three divs and other have one div. It has two columns.

  • When mobile size (less than 600px) all divs have one columns.



Please find the order with colors in image. This is sample code without any proper styles.

HTML:

<div class="body">
<div class="c1">blue</div>
<div class="c2">pink</div>
<div class="c3">green</div>
<div class="c4">yellow</div>
</div>


CSS:

@media only screen and (min-width: 0px) {
.c1 { width:100%; }
.c2 { width:100%; }
.c3 { width:100%; }
.c4 { width:100%; }
}
@media only screen and (min-width: 600px) {
.c1 { width:25%; }
.c2 { width:25%; }
.c3 { width:75%; }
.c4 { width:25%; }
}
@media only screen and (min-width: 768px) {
.c1 { width:25%; }
.c2 { width:25%; }
.c3 { width:50%; }
.c4 { width:25%; }
}


I tried this with order property in CSS, but its not working properly.

Answer

You were missing some styles to make the layout work. I'm assuming you had some trouble making the middle diagram fit with the other two because of your source order and the change in layout. Here's the CSS I picked for your media queries:

@media only screen and (min-width: 0px) {
.c1{ width:100%; min-height:5vh; }
.c2{ width:100%; min-height:5vh; }
.c3{ width:100%; min-height:80vh;}
.c4{ width:100%; min-height:10vh;}
}
@media only screen and (min-width: 600px) {
.c1{ width:50%; min-height:10vh; float:left; }
.c2{ width:50%; min-height:10vh; float:left; clear:left;}
.c3{ width:50%; min-height:80vh; position:absolute;right:0;}
.c4{ width:50%; min-height:10vh; float:left; clear:left;}
}
@media only screen and (min-width: 768px) {
.c1{ width:25%;}
.c2{ width:25%; float:right;clear:right;}
.c3{ width:50%; left:25%;}
.c4{ width:25%;}
}

Demo codepen:
http://codepen.io/anon/pen/KrQxLq