html - 在单/双列布局中控制div顺序？可能吗

我想要宽屏幕的双列布局，而窄屏幕的单列布局。

在双列布局中，我希望“左”和“右”项目彼此堆叠。

在单列布局中，我希望这些项目遵循它们在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这样的方法，但是它不起作用，因为经过2个或更多“左侧”浮动项目后，“右侧”浮动项目不会到达页面顶部。

<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>

最佳答案

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

@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。

关于html - 在单/双列布局中控制div顺序？可能吗，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26950371/