重新调整桌面和移动布局之间的元素并重新排序

Question

我想仅使用CSS实现以下功能（左侧是移动布局，右侧是断点后的桌面）：

这里的挑战显然是从浮动的角度来看，元素顺序发生了变化：在移动设备上绿色项目是第二个，但在桌面上它是第一个。

这可以用纯CSS实现吗？可能性是灵活盒，但我没有足够的经验来重新创建这种布局。

Answer 1

#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;                   /* 1 */
}
.box {
  width: 50%;
}
.box1 {
  background-color: lightgreen;
  height: 400px;
}
.box2 {
  background-color: orangered;
  height: 200px;
}
.box3 {
  background-color: aqua;
  height: 200px;
}
@media (max-width: 600px) {
  #container { height: auto; }     /* 2 */
  .box       { width: 100%;  }
  .box2      { order: -1;    }     /* 3 */
}
/* purely decorative styles */
.box {
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}
* { box-sizing: border-box; }

<div id="container">
  <div class="box box1"><span>1</span></div>
  <div class="box box2"><span>2</span></div>
  <div class="box box3"><span>3</span></div>
</div>

jsFiddle

注意：

1. 在column wrap容器中没有固定高度，flex项目不知道在哪里换行。因此，对于较大的屏幕，请定义一个高度，以强制第二个项目为新列。

2. 现在您处于移动布局中，不再需要包装。容器需要是桌面布局高度的两倍。释放高度。

3. 告诉红色框首先在列表中重新定位。 （Flex项目的初始order值为0。）

Answer 2

是的，如果可以在flex-container上设置固定高度，则可以执行此操作。您只需使用flex-direction: column和flex-wrap: wrap，然后使用媒体查询更改订单。

.content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.a {
  height: 200px;
  background: #00FF02;
}
.b {
  height: 100px;
  background: red;
}
.c {
  height: 100px;
  background: blue;
}
@media(min-width:768px) {
  .content {
    height: 200px;
  }
  .content > div {
    width: 50%;
  }
}
@media(max-width:768px) {
  .b {
    order: -1;
  }
}

<div class="content">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

Answer 3

还有no-flex解决方案，fiddle（只需将media-query min-width替换为您认为电话宽度结束的断点）：

<强> HTML：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

<强> CSS：

div {
  width: 50%;
}
.div1 {
  background-color: red;
  float: right;
  height: 200px;
}
.div2 {
  background-color: green;
  float: left;
  height: 400px;
}
.div3 {
  background-color: blue;
  float: right;
  height: 200px;
}
@media (max-width: 500px) {
  .div1, .div2, .div3 { width: 100%;}
}