CSS Flexbox：如何在一列中重新排序div以在屏幕大小调整时重排为两列

Question

我很擅长使用Flexbox而不确定它能解决我的问题。

我有一个940px宽度的布局，3列@ 300px（必需）。在中型到大型屏幕上，第一行包含2列（一列@ 600px），第三列（300px）包含两个垂直堆叠的div。在小屏幕上，我需要600px div来回流全宽，300px div在下一行水平（并排）回流。在最小的屏幕上，我需要全部垂直堆叠。我知道有些方法可以使用浮点数来做到这一点，但后来我遇到了多个专业类，我想使用可重用的css类规则，因为其他开发人员编写的javascript for...each语句。因此，我想知道flexbox是否可以为我提供一个响应式解决方案，使用可重用的类来重复div。这是我到目前为止所拥有的。

HTML

        <div class="container">
  <div class="content">
    <div class="row">
      <div class="flex-container">
      <div class="flex-item flex-item--1">1</div>
      <div class="flex-container-inner">
       <div  class="flex-item flex-item--2">2</div>
      <div  class="flex-item flex-item--3">3</div>
      </div>
      </div>
    </div>
      <div class="row">
        <div class="flex-container">
       <div class="flex-item">4</div>
      <div class="flex-item">5</div>
      <div class="flex-item">6</div>
      </div>

    </div>
  </div>
</div>

CSS

.container {
  width: 960px;
  margin: 0 auto;
}
.content {
  width: 940px;
  margin-left: 10px;
  margin-right: 10px;
}
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
.flex-item {
  background: #abc;
  width: 300px;
  height: 150px;
  margin-top: 20px;
  color: blue;
  font-size: 2em;
}
.flex-item--1 {
  width: 600px;
  margin-left: 0;
}
.flex-item--2 {
  height: 75px;
}
.flex-item--3 {
  height: 55px;
}
  @media screen and (min-width: 320px) and (max-width: 767px) 
  { 
 }
 @media screen and (min-width: 768px) and (max-width: 959px) {
  .flex-item--1 {
    flex: 2 0px;
  }
  .flex-item--2 {
    order: 1;
  }
  .flex-item--1 {
    order: 2;
  }
  .flex-item--3 {
    order: 3;
  }
}
@media screen and (min-width: 959px) and (max-width: 1023px) {}

  @media screen and (min-width: 1024px) {}

这就是我需要它来调整大小768px - 959px。

CODEPEN Example

UPDATE

这是各种屏幕尺寸的完整布局。我误解了Flexbox，我认为如果添加更多内容，div会响应，但事实并非如此。我还用li取代了divs。我是否需要使用大量的媒体查询来针对这些问题进行响应，如下图所示：

Answer 1

好的，我想这次我有。

解释说明：

1. 我将你的工作区设置为box-sizing: border-box。这会自动扣除边距，因此您无需手动设置.content { width: [container minus margins] }。
2. 我重新组织了您的媒体查询，以便您的“基础”设计适用于最小的屏幕，然后您从那里开始。大多数教程都说这是最佳实践，对我来说这是最直接的。如果你不喜欢它，这对你来说应该不会太难改变。在相关的说明中，我摆脱了所有and (max-width: [whatever])查询，因为它没有特定原因是多余的。
3. 我对前缀/替代语法（-webkit-和诸如此类的东西）不是很了解所以我只是把它们留给了我，以免我操纵你错了。它们很容易添加。
4. 我将%用于所有宽度，以便更容易一目了然地看到逻辑/关系。我还认为这对于媒体查询更好，因为有很多屏幕尺寸变化，特别是在移动设备中。但是根据您的具体价值进行调整非常容易。

http://codepen.io/anon/pen/zNpgpJ