如何迫使正确的六列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>

​

​

我正在尝试这种行为:在中小型设备上，每个块的宽度为12列，但默认情况下，#the-violet将低于#the-pink。我想要相反的，那是#the-violet高于#the-pink。

​

​

我目前(简化的) 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 like (小提琴)的类：

.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中以相反的顺序编写它们。