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. When desktop size (770px) first column have two div and others h

Solution 1:

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:

@mediaonly 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;}
}
@mediaonly 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;}
}
@mediaonly 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