CSS Flexbox 和响应式设计 : Converting 3 columns into 2 rows

Question

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

例如:

Container
Col 1 | Col 2 | Col 3

变成:

Container
Col 1 | Col 3
Col 2

这可能吗？

Answer 1

是的，你可以做到，尽管它本身并不是很“干净”。

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

然后使用 order 根据需要排列方框。

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