Drei Spalten div Layout-Design mit einstellbar

Question

Ich möchte wissen, wie man drei Spalten div Layout mit einstellbaren Größen in Respekt Größe wie im Bild angezeigt.

• Wenn Desktopgröße (770px) erste Spalte zwei div und andere haben haben eine divs.

• Wenn Tablet-Größe (600px) erste Spalte haben drei Divs und andere haben eine div. Es hat zwei Spalten.

• Wenn mobile Größe (weniger als 600px) alle Divs haben eine Spalten.

Finden Sie die Bestellung mit Farben im Bild. Dies ist ein Beispielcode ohne geeignete Stile.

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%; } 
} 

Ich versuchte dies mit, um Eigentum in CSS, aber es ist nicht richtig funktioniert.

Answer 1

Sie haben einige Stile vermisst, damit das Layout funktioniert. Ich gehe davon aus, dass Sie Schwierigkeiten hatten, das mittlere Diagramm aufgrund Ihrer Quellreihenfolge und der Änderung des Layouts mit den anderen beiden übereinstimmen zu lassen. Hier ist die CSS ich für Ihre Medien-Anfragen ausgesucht:

@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