<div class="container">
<div class="flex">
<div class="flex1">1 Flex</div>
<div class="flex2"><b>2 Flex</b></div>
<div class="flex3">3 Flex</div>
</div>
<div class="grid">
<div class="grid1">1 Grid</div>
<div class="grid2"><b>2 Grid</b></div>
<div class="grid3">3 Grid</div>
</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
padding: 50px;
align-items: flex-start;
}
.flex1, .flex2, .flex3,
.grid1, .grid2, .grid3{
border: 1px solid;
padding: 10px;
}
.flex3 {
width: 100%;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: -20px;
}
.grid {
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
grid-gap: 20px;
}
.grid3 {
grid-column: span 2;
}
.flex1, .flex2, .flex3 {
margin-bottom: 20px;
}
@media(max-width: 1023px) {
.grid3 {
grid-column: initial;
}
.grid {
grid-template-columns: initial;
justify-content: stretch;
}
.flex1, .flex2, .flex3,
.grid1, .grid2, .grid3 {
width: 100%;
}
.flex2 {
order: 1;
}
.grid2 {
grid-row: 3;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.