CSS flexbox fill available space to the right side of a slim but high element with elements while ignoring flex-direction row/column axis restrictions

Question

Is it possible to use css flexbox to fill the available space (kind of like playing tetris) ignoring the axis imposed by flex-direction column or row. The intended result should be one element on the right el1 of which its height exceeds those of el2 and el3 combined and therefore el2 and el3 fill the available space next to el1 naturally as follows from the HTML provided below.

Intended result

|------|------------------|
|      | el2              |
| el1  |------------------|
|      | el3              |
|------|------------------|

Using HTML

<div class="container">
    <div class="el1" style="height: 100px">
        el1
    </div>
    <div class="el2" style="height: 50px">
        el2
    </div>
    <div class="el3" style="height: 50px">
        el3
    </div>
</div>

The usual approach would be creating two divs in a container with flex-direction: row where the first div contains el1 and the second div contains a container with flex-direction: column containing el2 and el3 as shown below:

<div class="container" style="flex-direction: row">
    <div class="el1">
        el1
    </div>
    <div class="element-container" style="flex-direction: column">
        <div class="el2">
            el2
        </div>
        <div class="el3">
            el3
        </div>        
    </div>
</div>

This however restricts el3 to go under el1+el2 (shown below) when resizing the screen to mobile width which is the primary reason I am asking this question. Of course you can make changes in the DOM using JavaScript etc but thats not the "natural" approach I am looking for.

Intended result in mobile screen width

|------|------------------|
| el1  | el2              |
|------|------------------|
| el3                     |
|-------------------------|

Answer 1

You can use display grid along with a media query and just reorder the grid-template-areas from grid-template-areas: "el1 el2" "el1 el3"; to grid-template-areas: "el1 el2" "el3 el3";. Display grid allows the element to be moved anywhere in its parents border-box regardless of its linear layout in the HTML markup.

*{
  margin: 0;
  padding: 0;
}
.grid-container {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "el1 el2" 
    "el1 el3";
  height: 100vh;
}

.el1 {
  grid-area: el1;
  border: 1px solid blue;
}

.el2 {
  grid-area: el2;
  border: 1px solid red;
}

.el3 {
  grid-area: el3;
  border: 1px solid green;
}

@media screen and (max-width: 600px) {
.grid-container {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "el1 el2"
    "el3 el3";
    height: 100vh;
}
.el1 { grid-area: el1;}
.el2 { grid-area: el2;}
.el3 { grid-area: el3;}
}

<div class="grid-container">
  <div class="el1"></div>
  <div class="el2"></div>
  <div class="el3"></div>
</div>