响应式内嵌图像 div 更改相邻图像 div 的位置

Question

我有一个响应式 div，垂直分成两部分。这些设置为内联显示，side-by-side 水平显示，除非视口缩小到 400 像素以下，然后它们垂直堆叠。

当两个 child div 仅包含文本时一切正常 - 但 left-hand child div 中的图像将导致 right-hand child div 掉落：http://jsfiddle.net/2o9ryj93/.

我不知道为什么。谁能帮我吗？谢谢你的时间。

CSS:

.wrapper {
    width: 100%;
    display: inline-block;
    position: relative;
}
.wrapper:after {
    padding-top: 70%;
    display: block;
    content: '';
}
.main {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    font-size: 0;
}
#left,
#right {
    font-family: serif;
    line-height: 150%;
    font-size: 2.2vw;
    display: inline-flex;
    width: 40%;
    height: 90%;
    background-color: #edeeeb;
    padding: 5%;
}

Answer 1

见fiddle

添加CSS：

#left, #right{float:left;}