在另一个上面做一个div

Question

我有像这样的结构html

    <div class="main-row">
         <div class=""row-1">
         </div>
         <div class=""row-2">
         </div>
    </div>

第1行＆amp; row-2类似于bootstrap中的col-sm-6网格系统列。 现在我正在做响应我设置它们的宽度都是100％，我想要的只是第2行必须在第1行。

Answer 1

您不需要使用javascript来执行此操作。您的解决方案是使用CSS - flexbox属性order:

在.row-2上写下order: 0。

.main-row {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.row-2 {
    order: -1;
}

---编辑---

如果要完全反转元素顺序，则另一种解决方法是使用flex-direction: column-inverse。例如而不是1,2,3,4等...它将显示等，4,3,2,1

.main-row {
    width: 100%;
    display: flex;
    flex-direction: column-inverse; /*to display side by side use row-inverse*/
}

此处的快速演示：http://codepen.io/sandrina-p/pen/EydrLE

您可以了解有关Flexbox here

的更多信息