在大布局中保持不同高度的框在行中对齐，在小布局中堆叠

Question

使用 Bootstrap 3，我有四个不同的内容框，我不会提前知道它们的高度。在大型布局中，我希望将这四个框布置在网格中，使 A 在布局左半边的 B 之上，而 C 在布局右半边的 D 之上。在较小的布局中，我希望所有四个都堆叠在一起，A->B->C->D。所以我有一个基本的 bootstrap-3 网格（参见 Fiddle）。

在较大的布局中，我希望框 D 的顶部与框 B 的顶部对齐，同样无需事先知道任何框的高度。显然，在旧的表格布局中这很容易，但我不知道如何使用 Bootstrap 来做到这一点。我可以改变它，让我有两个<div class="row">，第一行是A和C，第二行是B和D，但这会破坏我较小的布局，因为我仍然希望A在B之上C 在 D 之上。

感谢您的帮助。

Answer 1

一位朋友在 Twitter 上给我的最佳答案是使用 CSS flex。一个flex-row 与所有四个框，将flex-flow 设置为row wrap，并将order 属性更改为较小的布局。

Updated JS Fiddle