Сделать DIV поверх другой

Question

я иметь структуру HTML, как этот

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

строки 1 & строки-2 подобна колонке системы Col-см-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; 
} 

---

--- EDIT ---

Другое решение, если вы хотите полностью инвертировать элементы заказ использует 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