Reorganize a grid at breakpoint with a different order - html css and js

Question

I'm sorry if my question look simple, but i'm stuck in a project and i think i missed something to make it work good.

I've to do a div reorganisation at breakpoint 1024px.

Schema How can i use flexbox to put the child 3 right side of child 1 and 2 ? I've tried with flexwrap but actually, i'm not sure that is the good way.

Thanks for your time

Answer 1

.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>

Answer 2

Thanks to you,

i found the best way with grid, thanks carlos.

My parents is now :

.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;
}

My child are assign with grid-area: child1;

I have learn to assign grid-area that is really hard to understand at first for me.

Thanks ;)