Html css div折叠顺序

这是我正在使用的布局。我试图实现的是，当窗口被折叠时，我希望右边的div被折叠，允许内部元素被向下推

我的css如下：

#left-div {
  display: block;
  float: left;
}
#right-div {
  display: block;
  float: left;
}
#right-div elements {
  display: inline-block;
}

我基本上是想实现在最后一张照片中发生的事情，而不是让正确的div先下移。有什么想法吗

---

编辑后删除图片，因为我得到了答案，我不确定我是否应该发布它们。

经过多次尝试后，JavaScript/jQuery可能是您唯一的解决方案…

我就是这么想的。。。我想在我开始组装不必要的JS之前我应该检查一下。。。现在看来有必要了呵呵。