css - CSS Flexbox 和响应式设计：将 3 列转换为 2 行

Question

我对 flexbox 有点陌生。我希望能够采用三列布局并将这三列变成两行，当它们在浏览器中达到较小的宽度时。

例如：

Container
Col 1 | Col 2 | Col 3

变成：

Container
Col 1 | Col 3
Col 2

这可能吗？

Answer 1

是的，你可以做到，虽然它本身不是很“干净”。

使用媒体查询来更改列的弹性基础。因此，在较窄的宽度上，flex-basis 将为 %50，在较宽的宽度上为 33%。

然后使用 order 按您的意愿排列盒子。

看看：http ://codepen.io/anon/pen/LvIni