Реорганизовать сетку в точке останова в другом порядке - html css и js

Question

Извините, если мой вопрос выглядит простым, но я застрял в проекте, и мне кажется, что я что-то упустил, чтобы он работал хорошо.

Я должен провести реорганизацию div в точке останова 1024px ,

Схема Как я могу использовать flexbox, чтобы поместить ребенка 3 справа от ребенка 1 и 2? Я пробовал с flexwrap, но на самом деле, я не уверен, что это хороший способ.

Спасибо за ваше время

Answer 1

Благодаря тебе,

я нашел лучший способ с сеткой, спасибо Карлос.

Мои родители сейчас:

.result-grid{
    display: grid;
    grid-template-columns: size col1 size col2;
    grid-template-rows: size row1 size row1;
    grid-template-areas:
    "child1 child2"
    "child3 child2";
    height: 500px;
}

Моему ребенку назначена область сетки: child1;

Я научился назначать область сетки, которая поначалу мне действительно трудно понять. .

Спасибо;)

Answer 2

.parent {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            height: 500px;
            max-width: 1024px;
        }

        .div1 {
            grid-area: 1 / 1 / 2 / 2;
            background-color: brown;
            height: 100%;
            width: 100%;
        }

        .div2 {
            grid-area: 1 / 2 / 3 / 3;
            margin: auto;
            background-color: burlywood;
            height: 100%;
            width: 100%;
        }

        .div3 {
            grid-area: 2 / 1 / 3 / 2;
            margin: auto;
            background-color: coral;
            height: 100%;
            width: 100%;
        }

<div class="parent">
        <div class="div1"> DIV1 </div>
        <div class="div2"> DIV2 </div>
        <div class="div3"> DIV3 </div>
    </div>