2-col到1-col响应式设计布局

Question

我正试图在桌面上使用2-col布局，如下所示：

移动设备上的1-col布局如下：

我无法将容器＃5 置于桌面上的正确位置。我的标记（为了简洁而修改）是这样的（这可以改为任何）：

<div id="container-1></div>
<div id="container-2></div>
<div id="container-3></div>
<div id="container-4></div>
<div id="container-5></div>

在桌面上：＃1 和＃5 向左浮动，其余则向右浮动。但这会导致＃5位于＃4 旁边（＃5与＃4最高对齐），而不是＃1 正下方。我认为它应该有效。我在这里错过了什么吗？

PS：所有容器的高度都是流动的

Answer 1

尝试将中间3包裹在一个额外的容器中并包裹它。

<div id="container">
    <div id="container-1">content content content content content content </div>
    <div id="containerwrapper">
        <div id="container-2">content content content content content content </div>
        <div id="container-3">content content content content content content content content content content content content </div>
        <div id="container-4">content content content content content content content content content content content content </div>
    </div>
    <div id="container-5">content content content content content content </div>
</div>​

和CSS：

#container { background: none; float: left; width: 340px; }
div { margin: 10px; margin-bottom: 0; background: #0f0; }
#container-1 { float: left; width: 60px; }
#containerwrapper { background: none; float: right; margin: 0; }
#container-2 { width: 240px; }
#container-3 { width: 240px; }
#container-4 { width: 240px; }
#container-5 { float: left; width: 60px; }​

您可以在此处查看：http://jsfiddle.net/GcYuh/