pexichdu pexichdu - 3 months ago 7
CSS Question

Make a div on top another

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

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. e.g. 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

Comments