三列div布局设计可调

Question

我想知道如何设计三个div div布局，其可调整大小，如图像所示。

• 当桌面大小（770px）第一列有两个div而其他第二列有一个div时。

• 当平板电脑尺寸（600px）第一列有三个div而另一个有一个div时。它有两列。

• 当移动尺寸（小于600px）时，所有div都有一列。

请在图片中找到包含颜色的订单。这是没有任何正确样式的示例代码。

HTML：

@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：

var RNFetchBlob = require('react-native-fetch-blob').default

我在CSS中尝试使用order属性，但它无法正常工作。

Answer 1

您缺少一些样式以使布局正常工作。我假设您在使用源顺序和布局更改时使中间图与其他两个图适合时遇到一些麻烦。这是我为您的媒体查询选择的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%;}
}

演示码本：
http://codepen.io/anon/pen/KrQxLq