Поддерживайте отзывную структуру с помощью макета боковой стержни ⇐ Html

[Anonymous]

Я пытаюсь реализовать макет со следующей структурой: < /p>

[*] Начальный макет: < /li>
< /ol>

• Верхняя полоса, содержащая некоторые коробки, выровненные в центре < /li>
  . />

Начальный макет, который показывает боковую полосу и большие коробки:


/> < /ol>

• Я хочу, чтобы большие коробки взяли полную ширину, а затем боковая панель должна подняться внизу и выровнять с небольшими коробками. Тем не менее, небольшие ящики также должны также обернуться.

Отзывчивый макет, где боковая панель перемещается внизу:
Это то, что я пробовал до сих пор. Но даже не очень близко к тому, чего я хочу достичь: < /p>

Код: Выделить всё

        .container {
display: grid;
gap: 16px;
grid-template-columns: 1fr 4fr;
}

.top-row {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
grid-column: 1 / -1;
background: green;
}

.bottom-row {
grid-template-columns: repeat (3, 1fr);
gap: 16px;
}

.box1, .box2, .box3 {
width: 300px;
height: 300px;
background-color: red;
}

.side-bar {
background: yellow;
}
.large-box {
background-color: green;
}< /code>
    
Row one that contains different boxes
side bar in the left side
The large box that takes the space

Box 1
Box 2
Box 3
Box 4

Подробнее здесь: https://stackoverflow.com/questions/796 ... bar-layout