使用Flexbox CSS的左列和堆叠的右列

Question

在大屏幕上，我想在左侧创建一列，在右侧创建具有2个堆叠框的另一列。

在小屏幕上，这些列应堆叠为单个列。但是，框的顺序应为2、1、3。

这是一个例子：

我将flex容器设置为flex-direction: column和flex-wrap: wrap，将box 1设置为flex-basis: 100%，但这不会使后两个项目换行到下一列。

在flexbox中如何实现这种布局？

这是我到目前为止的演示：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.cell {
  background: #ccc;
  border: solid 3px black;
  width: 50%;
}
.cell-1 {
  flex-basis: 100%;
}
@media (max-width: 500px) {
  .cell {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }
}

<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
  <div class="cell cell-1">
    <h2>One</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
  </div>
  <div class="cell cell-2">
    <h2>Two</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
  </div>
  <div class="cell cell-3">
    <h2>Three</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
  </div>
</div>

http://codepen.io/dloewen/pen/qOzogG

Answer 1

看起来你快到了。还有两步：

1. 定义弹性容器的高度

如果没有定义的高度，一些浏览器可能不知道在哪里换行。尝试这个：

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px; /* new; value just for demo purposes */
}

2. 在移动视图上关闭换行

@media (max-width: 500px) {
   .container { flex-wrap: nowrap; } /* new */
   .cell { width: 100%; }
   .cell-1 { order: 2; }
   .cell-2 { order: 1; }
   .cell-3 { order: 3; }
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}
.cell {
  background: #ccc;
  border: solid 3px black;
  width: 50%;
}
.cell-1 {
  flex-basis: 100%;
}
@media (max-width: 500px) {
  .container {
    flex-wrap: nowrap;
  }
  .cell {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }
}

<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
  <div class="cell cell-1">
    <h2>One</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
  </div>
  <div class="cell cell-2">
    <h2>Two</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
  </div>
  <div class="cell cell-3">
    <h2>Three</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
  </div>
</div>

修订代码笔