CSS砌筑与订购

Question

我有关于定位，订购和破坏移动设备div的问题。

以上是我目前拥有的布局的简化图像。问题在于描述部分上方的空白部分是由于较高的主要部分而发生的。

我希望它能够上升并填补空白空间。

另外，我需要将其分解为移动视图（每个100％宽度）：

主 画廊 描述 设施

这可以用flexbox，或丢失的网格或任何其他顺序来实现，但是我无法摆脱空白。

我已经尝试过flexbox定位，浮动定位，丢失列定位，css3列，但我现在已经没有想法了。

这是Flexbox示例的Fiddle，它不能解决问题但会显示问题和一般想法。

例如：

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper__item {
  flex: 0 0 50%;
  border: 1px solid gray;
}

有什么想法吗？