将侧边栏小部件很好地放置在彼此下方

Question

我们的内容侧边栏布局存在问题，可分解为以下内容。

我们有四个 div，A、B、C 和 D。A 和 C 有文本和图像 - 内容 - 应该放在左侧。 B 和 D 是链接、搜索表单等列表 - 侧边栏小部件 - 应放在右侧。

在 HTML 中，div 必须按照 A、B、C、D 的顺序出现，因为我们希望在小屏幕上是这样的顺序。像这样，来自侧边栏的一组快速链接几乎出现在顶部，用户不必一直向下滚动。

但是，这给我们在有侧边栏的大屏幕上定位带来了问题。因为 div B 的高度低于 div A 的高度，并且 div D 必须在 div C 之后，所以 div D 的位置太低了。在下面的 sn-p 中亲自查看。我们希望 div D 从 div B 的正下方开始。

我们知道 div A 的确切高度，但其他 div 是灵活的。给出了所有 div 的宽度。有没有一种纯 CSS 方法可以很好地使这些 div 定位？如果没有必要，我们宁愿不使用 JavaScript。当然，这必须跨浏览器工作。

我考虑过使用 CSS 列，但我需要侧边栏不那么宽。

如果有办法为不同的屏幕尺寸更改元素的顺序，那将是可行的。但我怀疑如果没有 JavaScript，这是可能的。

div#container {
  width: 100%;
}

div#container div {
  margin-bottom: 20px;
}

div.left {
  float: left;
  width: 70%;
}

div.right {
  float: right;
  width: 26%;
}

div#div-a {
  height: 100px;
  background-color: #000;
}
div#div-b {
  height: 60px;
  background-color: #f00;
}
div#div-c {
  height: 200px;
  background-color: #0f0;
}
div#div-d {
  height: 120px;
  background-color: #00f;
}

<div id="container">
  <div id="div-a" class="left"></div>
  <div id="div-b" class="right"></div>
  <div id="div-c" class="left"></div>
  <div id="div-d" class="right"></div>
</div>

Answer 1

试试这个（删除float: right 并使用display: inline-block 和.right 的20px 左边距）：

div.right {
    /* float: right; */
    width: 26%;
    display: inline-block;
    margin-left: 20px;
}