响应式布局，盒子位置

Question

我正在建立一个自适应网站。基本版本有2列，每列有几个框：

1列布局显示如下：

单列版本的一种天真的方法是将第二列中的所有内容放在第一列......但我无法做到这一点。我需要能够从两列中选择框并按自定义顺序放置它们。 我能想到的唯一方法是通过盒子复制和隐藏桌面/移动设备。你有什么建议吗？

谢谢，Michal

更新：由于这似乎是同位素（和类似的库相关），我在这里创建了一个新帖子：Reordering boxes with Isotope

Answer 1

使用一些自定义CSS几乎可以实现这一点。不幸的是，Bootstrap的默认网格无法满足您的需求，因为任一列中的项目都有不同的高度。

Here's a basic example on JSBin（调整输出窗格的大小以查看元素堆栈）。

这里有很多自定义CSS很不幸，但它确实有效。

.col-right, .col-left {
    width: 50%;
    padding: 15px;
    margin-bottom: 10px;
}

.col-left {
    float: left;
    clear: left;
    height: 300px;
    background: teal;
}

.col-right {
    float: right;
    clear: right;
    height: 200px;
    background: orange;
}

@media (max-width: 767px) {
    .col-left, .col-right {
        float: none;
        width: auto;
    }
}

我在767px处添加了一个简单的断点用于演示。如果您使用的是Bootstrap的LESS，则需要将其替换为@screen-xs-max。

<强> HTML

<div class="row">
    <div class="col-left">A</div>
    <div class="col-right">D</div>
    <div class="col-left">B</div>
    <div class="col-right">E</div>
    <div class="col-right">F</div>
    <div class="col-left">C</div>
    <div class="col-right">G</div>
</div>

这可以使用float: left或float: right作为左/右列，clear仅使用该列的浮点数。这并不完美，但如果不使用像Masonry这样的JavaScript库，它就是你最接近的。

Answer 2

听起来你应该看看Isotope，在我看来它可以帮助你想要实现的目标。

http://isotope.metafizzy.co

您可以使用Isotope并设置一个列布局。

您还可以使用同位素排序来自定义移动设备上的框的顺序。

http://isotope.metafizzy.co/sorting.html

Answer 3

试试这个？

   <div style="float:left; width:50%; background: rgb(121, 82, 0);">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
    </div>
    <div style="float:left; width:50%; background: rgb(0, 0, 255);">
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
    </div>