<div class="flex v1">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
<hr />
<div class="flex v2">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
.block {
width: 100px;
height: 100px;
background-color: tomato;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 22px;
}
.flex {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex.v1 {
width: 210px;
}
.flex.v1 .block:nth-child(2) {
order: 2;
width: 100%;
}
.flex.v1 .block:last-child {
order: 1;
}
.flex.v2 {
height: 210px;
width: 200px;
flex-direction: column;
}
.flex.v2 .block:last-child {
height: 100%
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.