調整可能な3列のdivレイアウト設計

Question

画像で表示するような調整サイズで3列のdivレイアウトを設計する方法を知りたい。デスクトップサイズ（770px）最初の列は、2つのDIVを有し、他の一つのdivを有する

• 。

• タブレットサイズ（600px）の最初の列に3つのdivがあり、その他に1つのdivがある場合。 2つの列があります。

• モバイルサイズ（600px未満）のすべてのdivには1つの列がある場合。

画像の色で注文してください。これは、適切なスタイルのないサンプルコードです。

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

私はCSSでの順序プロパティでこれを試してみましたが、そのは正常に動作しません。

Answer 1

レイアウトを機能させるためにいくつかのスタイルが欠けていました。私はあなたのソースの順序とレイアウトの変更のために、他の2つに合わせて中間の図を作成するのにいくつか問題があったと仮定しています。ここで私はあなたのメディアクエリのために選んだCSSだ：

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

デモcodepen：
http://codepen.io/anon/pen/KrQxLq