Flexbox - 首先在新行上换行中心项目

我正在使用 Flex Box 创建传统的浮动项目列表。我有三个项目，结构如下：

<section>
    <div>
        item one
    </div>
    <div>
        item two
    </div>
    <div>
        item three
    </div>
</section>

与CSS：

section{
    display: flex;
    flex-wrap: wrap;
}
div{
    width: 33%;
    min-width: 200px;
    border: 1px solid black;
}

在当前的格式中，item three如果屏幕宽度低于阈值，则始终是第一个被推到新行的子项。

是否有办法配置 Flex Box 以便item two总是第一个掉落？

JSFiddle https://jsfiddle.net/vp696hp6/

您可以控制媒体查询中 Flex 项目的换行行为和顺序：

修改后的小提琴 https://jsfiddle.net/vp696hp6/3/

section {
  display: flex;
}
div {
  width: 33%;
  min-width: 200px;
  border: 1px solid black;
}
@media (max-width: 600px) {
  section { flex-wrap: wrap; }
  div:nth-child(2) { order: 1; }
}

<section>
  <div>item one</div>
  <div>item two</div>
  <div>item three</div>
</section>

从规格来看：

5.4.显示顺序：order财产 https://www.w3.org/TR/css-flexbox-1/#order-property

默认情况下，Flex 项目的显示和布局顺序与其在源文档中的显示顺序相同。这order属性可用于更改此顺序。

The order属性控制 Flex 容器的子项在 Flex 容器中出现的顺序，通过 将它们分配到序数组。需要一个<integer>value，指定弹性项目的序数组 属于。

最初的order所有弹性项目的值为 0。