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

Question

我们遇到内容侧边栏布局问题，该问题可分解为以下内容。

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

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

然而，这给我们带来了一个问题，我们有一个侧边栏在更大的屏幕上定位。因为div B的高度低于div A的高度，并且div D必须在 div C之后，所以div D定位得太低。请在下面的代码段中亲自查看。我们希望div D直接从div B下面开始。

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

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

如果有办法改变不同屏幕尺寸的元素顺序，那就可以了。但我怀疑没有JavaScript是可能的。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试此操作（移除float: right并使用display: inline-block和20px左边距.right}：

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