如何在不均匀内容之间布置Bootstrap列而没有垂直空格？

Question

您好我在Bootstrap工作，我有4列我想在更大的屏幕上布局，如下所示：

_________________
|       |        |
|   1   |    2   |
|       |________|
|_______|        |
|       |    4   |
|   3   |________|
|_______|

在移动设备上，订单必须是：

_________
|       |
|   1   |
|       |
|_______|
|       |
|   2   |
|_______|
|       |
|   3   |
|       |
|_______|
|       |
|   4   |
|_______|

列的深度由内容决定，无论我如何订购我的列和行，我都无法在没有大空间的情况下实现更大的屏幕布局，因为行或列以某种方式清除我不会想要他们，比如这个：

_________________
|       |        |
|   1   |    2   |
|       |________|
|_______|________
|       |        |
|       |   4    | 
|   3   |        |
|_______|________|

如果col 1中的内容很大，则第2列和第4列之间的间隙可能会非常大。如果我尝试将列中左侧的列和列中右侧的列包装起来，那么移动设备上的顺序就错了，因为它将会出现

_________
|       |
|   1   |
|       |
|_______|
|       |
|   3   |
|_______|
|       |
|   2   |
|       |
|_______|
|       |
|   4   |
|_______|

我正在使用Bootstrap 4 alpha 6但是如果你有一个Bootstrap 3的答案，那么这也会有所帮助。我已经在Bootstrap 4中尝试了新的卡布局，这也不是很有效。我该怎么做？

感谢。