Как создать конкретную отзывчивую сетку, которая имеет уникальный порядок на элементы? ⇐ CSS

[Anonymous]

Я делаю панель инструментов для веб -сайта, над которым я сейчас работаю, и у меня есть несколько вопросов о макете сетки, так как я в основном использовал только Flexbox .
Посмотрен на изображении ниже, у меня есть 3 , так что вы можете увидеть, как я хочу, чтобы макет изменился по мере изменения разрешения на мобильный.
В настоящее время я Я использую два столбца первого для левой стороны ( S 1 и 3) и правая ( 2) Но с этим я не могу создать мобильный макет, который хочу. 2 должен пропустить UNDETET 1 и 3, когда он на мобильном телефоне, но поднимайте всю правую сторону, когда в виде настольного компьютера. Я делаю это? банкомат, только то, что нужно для создания основной планировки 3 , с которым у меня возникают проблемы, так как я не хочу делать много стиля, просто чтобы изменить все это, если я Получите хороший ответ здесь.) < /p>
.dashboard-container {
display: grid;
grid-template-columns: 1fr 500px;
column-gap: 1rem;
padding: 1rem;
}

.dashboard-left {
display: grid;
grid-template-rows: 200px 1fr;
row-gap: 1rem;
}





overview




recent

notes





calendar





Подробнее здесь: https://stackoverflow.com/questions/794 ... r-to-eleme