[SOLVED] Reorganize a grid at breakpoint with a different order

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

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

Solution

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