保持不同高度的盒子在大布局中成行对齐，在小布局中堆叠
keep different height boxes aligned in rows in large layout, stacked in small layout
使用Bootstrap 3，我有四个不同的内容框，我事先不知道它们的高度。在大型布局中，我希望将这四个框布置在网格中，使得 A 在布局左半部分位于 B 之上，而 C 在布局右半部分位于 D 之上。在较小的布局中，我希望所有四个堆叠在一起，A->B->C->D。所以我有一个基本的 bootstrap-3 网格（参见 Fiddle）。
在更大的布局中，我希望盒子 D 的顶部与盒子 B 的顶部对齐，同样无需事先知道任何盒子的高度。显然，在旧的 table 布局中这很容易，但我不知道如何使用 Bootstrap 来做到这一点。我可以更改它，以便我有两个 <div class="row">，第一行是 A 和 C，第二行是 B 和 D，但这会破坏我较小的布局，因为我仍然希望 A 位于 B 之上C 的顶部 D 的顶部。
感谢您的帮助。
一位朋友在 Twitter 上给我的最佳答案是使用 CSS flex。一个 flex-row 包含所有四个框，将 flex-flow 设置为 row wrap，并将 order 属性 更改为较小的布局。
使用Bootstrap 3，我有四个不同的内容框，我事先不知道它们的高度。在大型布局中，我希望将这四个框布置在网格中，使得 A 在布局左半部分位于 B 之上，而 C 在布局右半部分位于 D 之上。在较小的布局中，我希望所有四个堆叠在一起，A->B->C->D。所以我有一个基本的 bootstrap-3 网格（参见 Fiddle）。
在更大的布局中，我希望盒子 D 的顶部与盒子 B 的顶部对齐，同样无需事先知道任何盒子的高度。显然，在旧的 table 布局中这很容易，但我不知道如何使用 Bootstrap 来做到这一点。我可以更改它，以便我有两个 <div class="row">，第一行是 A 和 C，第二行是 B 和 D，但这会破坏我较小的布局，因为我仍然希望 A 位于 B 之上C 的顶部 D 的顶部。
感谢您的帮助。
一位朋友在 Twitter 上给我的最佳答案是使用 CSS flex。一个 flex-row 包含所有四个框，将 flex-flow 设置为 row wrap，并将 order 属性 更改为较小的布局。