将 Flex 容器在特定断点处包裹为全宽

Question

我有 3 个 Div 容器。方框 1 应该位于左侧，右侧应该是方框 2 和方框 3 彼此重叠，如下图所示。

如何在特定断点处将 Box 3 换行为全宽的新行。我知道 CSS 媒体查询是必要的，但是如何包装 Flex 框呢？

HTML

<div class="container">
  <div class="box1">Box 1 (volle Höhe)</div>
  <div class="right-column">
    <div class="box2">Box 2 (oben)</div>
    <div class="box3">Box 3 (unten)</div>
  </div>
</div>

CSS

.container {
  display: flex;
}

.box1 {
  flex: 1;
  background-color: #D7E8D4;
  padding: 20px;
}

.right-column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.box2, .box3 {
  flex: 1;
  background-color: yellowgreen;
  padding: 20px;
}

/* Media Query ab einer Bildschirmbreite von 800px */
@media (min-width: 800px) {
  .right-column {
    flex-direction: row;
  }
}