Css 将flex box中的第一个和最后一个项目保留在一行上，同时将其余项目移动到其下方

我有一个使用flexbox的导航栏，看起来像这样（正常屏幕宽度）：

我怎样才能使布局做到这一点：

| div 1 |              | div 3 |
|            div 2             |

当挤压下来时（例如在电话屏幕上）

这似乎是可能的，但它可能涉及javascript，因为存在一些元素的重新排序。我尝试使用

order

CSS属性，但这不是我所需要的。要移动我正在使用的行，请使用

flex-flow

---

此外，我正在使用GWT创建此页面。

这是

flex

解决方案，具有

order

+

minwidth

技巧

查看演示，调整大小并查看

.wrap{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.wrap>.a{
背景：石灰；
顺序：1；
}
.wrap>.b{
背景：橙色；
顺序：2；
弹性：1；
}
.wrap>.c{
背景：水；
顺序：3；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.wrap>.b{
背景：橙色；
顺序：3；
最小宽度：100%；
}
.wrap>.c{
背景：水；
顺序：2；
}
}

A.
B
C

这是一个很好的答案。问题是我必须使用flexbox。我也不相信float可以使用flexbox。@MiloGertjejansen我用flex玩得更多，上面更新了，看看吧！这适用于Chrome。你知道Safari和Firefox有什么解决方法吗？我在这两个版本中都进行了测试，结果都没有达到预期效果。@MiloGertjejansen对于Firefox来说，它可能与

min width

thing-有关，对于Safari来说，您需要在所有属性前加前缀-我在移动设备上，所以无法进行测试，但在我看来，更改顺序是第一件事（flexbox可以做到），然后强制换行，大概是通过强制宽度，然后设置大小。将所有这些都打包到媒体查询中。这是可行的，但这取决于你想要的实际外观。理想的设计形象。否则，这个问题可能太宽泛了。下面@Pangloss的答案就是我所需要的确切答案。我只需要使用flexbox而不是float什么的。

| div 1 |              | div 3 |
|            div 2             |