<div class="grid">
<div class="box">1</div>
<div class="box">3</div>
<div class="box">2</div>
</div>
.grid {
display: grid;
justify-content: center;
grid: repeat(2,100px) / repeat(2, 200px);
grid-gap:20px;
}
.box {
border:2px solid black;
}
.box:nth-child(3) {
grid-row: 1/3;
grid-column: 2;
}
@media (max-width: 700px) {
.grid {
grid: 50px 150px 50px / 200px;
}
.box:nth-child(3){
grid-column:unset;
grid-row:2;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.