如何强制正确的六列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以上.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%; } } 。

我当前的（简化） SCCS是：

clearfix

我假设respond-to和reversed mixins众所周知。

我已经制作并以固定高度接近，为我的行添加了一个名为.reversed { position: relative; @include respond-to("small" "medium") { .sm-12, .md-12 { position: absolute; top: 0; &::first-child { top: 200px; } } } } 的类，如（Fiddle）：

// create the quit button
Button* quitButton = new Button(QString("Esci"));
int qxPos = 600;
int qyPos = 0;
quitButton->setPos(qxPos,qyPos);
connect(quitButton,SIGNAL(clicked()),this,SLOT(close()));
scene->addItem(quitButton);

但是，我想知道以前是否有人遇到过这种需求，并且有另一种方法以 clean 的方式解决它（没有固定高度）。

Answer 1

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