两个 div，每个在两个 div 中 - 如何使用 CSS（用于响应式）更改堆叠顺序？

Question

前言：我无法更改 HTML。

为了更好地解释我的问题，我在下面提供了一个说明。本质上，我有两行 div - 第一行有内容，第二行在内容下方有一个按钮。

我想让页面具有响应性，以便带有按钮的 div 始终位于其对应的带有内容的 div 下方，但额外的容器 div 证明是一个挑战。有什么想法吗？

What I have (above) and what I want (below).

这是 HTML 代码：

<div class="choice-section">
    <div id="choice_1" class="choice odd" style="margin-top: 242px;">
        <div class="content">asdf</div>
    </div>
    <div id="choice_2" class="choice even" style="margin-top: 322px;">
        <div class="content">asdf</div>
    </div>
</div>
<div>
    <div class="vote-choice odd">
        <a class="vote btn" href="javascript:void(null)" choice="1">Vote</a>
    </div>
    <div class="vote-choice even">
        <a class="vote btn" href="javascript:void(null)" choice="2">Vote</a>
    </div>
</div>

Answer 1

我强烈建议您查看Bootstrap's 网格和列系统，使用它可以轻松实现这一点。这个框架将使响应式设计变得轻而易举。

您可以看到 example 的内容与您在 Plunker 中尝试实现的目标非常相似，我很快将其放在一起

CSS：

.blue {
  background-color:blue;
  height:200px;
}

.red {
  background-color:red;
  height:200px;
}

.purple {
  background-color:purple;
  height:200px;
}

.green {
  background-color:green;
  height:200px;
} here

HTML：

<div class="container">
<div class="row">
  <div class="col-sm-3">
    <div class="red">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="blue">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="purple">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="green">
    </div>
  </div>
</div>