html - 在响应式布局中 Div 隐藏在另一个 Div 后面

Question

抱歉，现在太晚了，我无法弄清楚...

我有一个响应式 div，垂直分成两部分。这些设置为内联、水平并排显示:

[1][2]

除非视口(viewport)缩小到 400px 宽以下，否则它们会垂直堆叠 - 像这样:

[1]
[2]

这工作正常，直到我添加第二组:

[1][2]
[3][4]

然后，当视口(viewport)缩小到 400px 以下时，[2] 会隐藏在 [3] 后面:

[1]
[3]
[4]

这是一个更清晰的演示:http://jsfiddle.net/c14n6ym4/ 。我错过了一些东西，有人可以帮忙吗？感谢您抽出时间。

CSS:

.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 40%;
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
#left,
#right {
font-family: serif;
font-size: 20vw;
display: inline-flex;
width: 50%;
height: 100%;
float: left;
}
@media (max-width: 400px) {
#left,
#right {
font-size: 40vw;
width: 100%;
}
.wrapper:after {
padding-top: 80%;
}
}

Answer 1

更新您的标记结构并将您的 id 更改为类。

http://jsfiddle.net/partypete25/c14n6ym4/1/

<div class="wrapper">
  <div class="main">
    <div class="left">
      <p>1</p>
    </div>
    <div class="right">
      <p>2</p>
    </div>
    <div class="left">
      <p>3</p>
    </div>
    <div class="right">
      <p>4</p>
    </div>    
  </div>
</div>