將div放在另一個之上

Question

我有這樣的結構html

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

第1行和第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，etc ...它將顯示etc，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的更多信息