Как расположить блоки друг над другом при уменьшении размера экрана? codepen
Минимальная ширина блоков .top-item-1/2, .bottom-item-1/2 и .block_left - 320px
Должен быть такой порядок
.block_left
.block_right
.block_top-items
-- .top-item-1
-- .top-item-2
.block_middle-item
.block_bottom-items
-- .bottom-item-1
-- .bottom-item-2
.blocks
.block_right
p block_right
.block_top-items
.item-1
p top-item-1
.item-2
p top-item-2
.block_middle-item
p block_middle-item
.block_bottom-items
.bottom-item-1
p bottom-item-1
.bottom-item-2
p bottom-item-2
.block_left
p block_left
.blocks {
display: grid;
grid-template-columns: 70% 30%;
}
.block_right {
background: red;
}
.block_left {
background: green;
}
.block_top-items {
display: grid;
grid-template-columns: 1fr 1fr;
}
.item-1,
.item-2 {
margin: 10px;
background: orange;
}
.block_middle-item {
margin: 10px;
background: white;
}
.block_bottom-items {
display: grid;
grid-template-columns: 1fr 1fr;
}
.bottom-item-1,
.bottom-item-2 {
margin: 10px;
background: orange;
}