Make a div on top another

Question

I have the structure html like this

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

row-1 & row-2 are like col-sm-6 grid system column in bootstrap. Now i'm doing responsive I set both of them have width 100%, all I want is row-2 has to be on top row-1.

Answer 1

You don't need javascript to do it. Your solution is using CSS - flexbox property order:

On .row-2 you write order: 0 .

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

.row-2 {
    order: -1;
}

---

--- EDIT ---

Another solution if you want to full invert the elements order is using flex-direction: column-inverse . eg instead of 1,2,3,4,etc... it will display etc,4,3,2,1

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

A quick demo here: http://codepen.io/sandrina-p/pen/EydrLE

You can know more about Flexbox here