简单的回答是你不能真正的用两个div来做图片描述的事情，除了你几乎肯定不想做的绝对定位之外，如果没有一个最小的实际html和css的可复制的例子，很难确定这一点。
当你做一个二维布局时，你可能会更好地使用一个带有display: grid集的父<div>。

<div class="parent">
    <div class="child child--1">Div 1</div>
    <div class="child child--2">Div 2.1</div>
    <div class="child child--3">Div 2.2</div>
</div>

.parent {
    display: grid;
    gap: 20px;
}

.child {
    background-color: dodgerblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child--1 {
    min-height: 200px;
    grid-row: 2;
}

.child--2 {
    grid-row: 1;
}

.child--2,
.child--3 {
    min-height: 100px;
}

@media only screen and (min-width: 64rem) {
    .parent {
        grid-template-rows: repeat(2, 1fr);
    }

    .child--1 {
        grid-row: 1 / span 2;
    }

    .child--2 {
        grid-row: 1;
        grid-column: 2;
    }

    .child--3 {
        grid-row: 2;
        grid-column: 2;
    }
}