Wrap Flex Container at specific Breakpoint to full width

Question

I have 3 Div Containers. Box 1 should be on the left and on the right should be Box 2 and Box 3 above one another like this Image.

Flexbox at Desktop

How do I wrap Box 3 to a new line with full width at a specific Breaktpoint. CSS Media Queries is neccessary I know, but how do I wrap the Flex box?

Later the Flexbox should wrap to a new line

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