在媒体查询中将一个 div 放在另一个之上

Question

所以我有两个 div，在大屏幕上它们并排。

<div1> <div2>

在较小的屏幕上，我想要

<div2>
<div1>

我想我可以删除 float 并放入 width:100% 和 display:block;。两个 div 是一个在另一个之上，我们已经完成了一半。但是我如何将 div2 放在 div1 之上？我尝试放置相反的花车，一个 div 向右漂浮，另一个向左漂浮，但没有运气。

对于一切都流畅的响应式 Web 应用程序，负边距是否是一个合法的解决方案？我无法让 div1 位于另一个下方，它们总是重叠。或者有更稳固的解决方案？设置 display: table-header-group; 在 fiddle 中有效，但在我的项目中无效，我不明白为什么。没有 CSS3 就很棒。

这是一个fiddle

谢谢

Answer 1

我更新了你的fiddle

我在两个 div 中添加了 float:right;，并且我更改了页面上的顺序，如下所示：

<div id="amir">amir</div>
<div id="jake">jake</div>

还有第二个版本，当阿米尔在上面时here

Answer 2

您只需将 HTML 分区的位置交换为：

<div id="amir">Amir</div> <div id="jake">Jake</div>

这是fiddle for you