Wondering how to switch these two divs?-CodePudding

I've put wrapped them in divs and put inline-block on both of them to have them side by side and I was wondering how I could switch it so that the right is on the left?

image

[1]

CodePudding user response：

You can do this by using flexbox with the order command:

.wrapper {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 500px;
}

.wrapper .wrapper__child1 {
    flex: 0 0 50%;
    height: 100%;
    width: 50%;
    order: 2;
    background: red;
}

.wrapper .wrapper__child2 {
    flex: 0 0 50%;
    height: 100%;
    width: 50%;
    order: 1;
    background: blue;
}

<div >
    <div ></div>
    <div ></div>
</div>

CodePudding user response：

you can use flex and then set flex-direction to reverse-row. so your CSS would be:

.wrapper {
  display: flex;
  flex-direction: reverse-row;
}