javascript - 以不同的顺序在断点处重新组织网格 - html css 和 js

Question

如果我的问题看起来很简单，我很抱歉，但我被困在一个项目中，我想我错过了一些让它运作良好的东西。

我必须在断点 1024px 处进行 div 重组。

Schema 如何使用 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;
}

我的孩子被分配了 grid-area: 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>