I am trying to rearrange the order of three divs in my markup layout.
The desired layout is to display div one first, followed by three underneath it in the first column. Then, in the second column, I want to only show div two. My current CSS configuration is not able to achieve this. How can I reposition div two into the second column?
.main {
width: 400px;
}
.box {
width: 50%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 100%;
border: 1px solid red;
}
.box>div:first-child{
flex: 1 1 70%;
width: 70% !important;
}
.box>div:nth-child(2) {
flex: 1 1 30%;
order: 3;
width: 30%;
float: right;
}
.box>div:nth-child(3) {
flex: 1 1 70%;
width: 70%;
}<div class="main">
<div class="box">
<div>One</div>
<div>Two
<p>paragraph</p>
</div>
<div>Three</div>
</div>
</div>