控制单/双列布局中的div顺序？它甚至可能吗？

Question

我想要一个用于更宽屏幕的双列布局和一个用于更窄屏幕的单列布局。

在双栏布局中，我喜欢＆＃34;左＆＃34;和＆＃34;对＆＃34;要堆叠在彼此之下的物品。

在单一列布局中，我希望这些项目遵循他们在html中编写的顺序。

为了演示，这两个样本在双列版本中看起来应该相同：

HTML 1

<div class="left">left one</div>
<div class="left">left two</div>
<div class="left">left three</div>
<div class="right">right one</div>
<div class="right">right two</div>
<div class="right">right three</div>

HTML 2

<div class="left">left one</div>
<div class="left">left two</div>
<div class="right">right one</div>
<div class="left">left three</div>
<div class="right">right two</div>
<div class="right">right three</div>

CSS

我已经尝试过像这样的CSS，但它并不起作用，因为＆＃34;对＆＃34;浮动的项目在2个或更多＆＃34; left＆＃34;之后不会转到页面顶部。漂浮的物品。

<style>

.left {float:left;}
.right {float:right;}

@media (max-width:991px){
    .left,
    .right  {
        width:100%;
    }
}
@media (min-width:992px){
    .left {
        width:60%;
        float:left;
    }
    .right {
        width:30%;
        float:right;
    }
}
</style>

Answer 1

我认为这些规则可以胜任：

@media (min-width: 992px) {
    .left {
        width: 60%;
    }
    .right {
        width: 30%;
        float: none;
        display: inline-block;
        margin-left: 10%;
    }
}

要使正确的项目正确浮动，您可以为宽尺寸设置float: none，marging-left: 10%将在列之间保持适当的10％差距。

演示：http://jsfiddle.net/3dkmt84n/

_{注意：在演示min-width中，为了演示目的，缩小为400px。}