媒体查询和2列布局：任意定位

Question

我们刚刚开始根据响应式网页设计+移动优先理念和指南重新设计我们的网站。

在特定页面中，我们面临以下情况：在页面的“移动视图”中，我们希望将元素排列为图像的左侧部分。

这就是为什么在HTML中这些元素声明如下：

<div id="container">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>

到目前为止，所有这一切都很简单。问题在于，使用媒体查询，对于更高的屏幕分辨率，我们想要重新排列项目，如图像的右侧部分所示。

解决我们这个页面的特殊问题的一般问题是：是否可以将任意元素浮动到两列中的每一列而不必更改两个版本之间的HTML标记？非常需要纯CSS解决方案。

注意：元素的高度未知，宽度为百分比。

编辑：为了澄清，关于我们的特定情况，我们需要在项目B下附加项目E，而不是垂直对齐D. This fiddle显示我们不知道的内容我想要。

Answer 1

你可以这样做吗？

<div id="container">
    <div id="A">A</div>
    <div id="B" class = "left">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>

您可以在所需的媒体查询中设置float：left，然后在另一个中忽略它。

编辑：

为了回应OP的反馈，B和D没有直接坐在彼此之上，修改代码浮动：正确地修复了这个问题。即

<div id="container">
    <div id="A" class = "right">A</div>
    <div id="B" >B</div>
    <div id="C" class = "right">C</div>
    <div id="D" class = "right">D</div>
    <div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>

Answer 2

您可以将A，C和D浮动到右侧。但是，您可能需要将overflow:auto应用于B和E。另请注意，如果B高于A，C会被推下来进行相应调整。

Fiddle

Answer 3

对于正常布局，你应该这样做。 两个div都应该悬空。

<div id="container1">
    <div id="left">
        <div id="B">B</div>
        <div id="E">E</div>
    </div>
    <div id="right">
        <div id="A">A</div>
        <div id="C">C</div>
        <div id="D">D</div>
    </div>
</div>

问题是移动版本使用另一种安排。 因此，一种解决方案是为移动页面创建其他版本并隐藏#container1（反之亦然，为其他站点）。

<div id="container2">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>