css - 如何强制正确的六列 DIV 在 RWD 中保持在顶部？

Question

我正在使用一个自定义的 12 列网格并给定一行:

<div class="row">
    <div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div>
    <div id="the-violet" class="lg-6 md-12 sm-12"><!-- content --></div>
</div>

我试图获得这种行为:在中型和小型设备上，每个 block 的宽度为 12 列，但默认情况下，#the-violet 将低于 #the-粉色。我想要相反的东西，即 #the-pink 上方的 #the-violet。

我当前的 (简体) SCCS 是:

.row {
    @include clearfix;
    [class*="lg-"],
    [class*="md-"],
    [class*="sm-"] {
        float: left;
    }
}
.lg-6 {
    width: 50%;
}
.md-12 {
    @include respond-to("medium") {
        width: 100%;
    }
}
.sm-12 {
    @include respond-to("small") {
        width: 100%;
    }
}

我假设 clearfix 和 respond-to 混合宏是众所周知的。

我已经制作并采用固定高度，为我的行提供了一个名为 reversed 的类，例如 ( Fiddle ):

.reversed {
    position: relative;
    @include respond-to("small" "medium") {
        .sm-12,
        .md-12 {
            position: absolute;
            top: 0;
            &::first-child {
                top: 200px;
            }
        }
    }
}

但是，我想知道是否有人以前遇到过这种需求并且有另一种方法以干净的方式(不固定高度)解决它。

Answer 1

您可以对它们使用 float: right 并在 HTML 中以相反的顺序编写它们。