Arrange flexbox elements with first child taking entire two row height

Question

How can I arrange elements in flexbox like this:
In browser:.

And in mobile:

Answer 1

If you need to control both height and width at the same time, then you should use CSS-Grid. Flexbox is only good at controlling either height or width.

CSS-Grid creates a table like layout by placing elements on column and row lines.

To use grid, apply display: grid; at the container. To make an element span 2 rows, apply grid-row: span 2; to the element itself.

.container {
  display: grid;
  grid-gap: 10px;
}

@media only screen
  and (min-width: 500px) {
    .container {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .container div:first-of-type {
      grid-row: span 2;
    }
}

/* for styling purpose only */
.container div {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid black;
  min-height: 20vh;
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

Answer 2

Here is the working example with Flexbox, you just need additional wrapper for items 2 and 3

html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
  
@media (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
}

.one {
  height: 50%;
  width: 100%;
  background-color: red;
}
  
@media (min-width: 768px) {
  .one {
    height: 100%;
    width: 50%;
  }
}

.two-three {
  flex-direction: column;
  width: 100%;
  height: 100%;
}
  
@media (min-width: 768px) {
  .two-three {
    height: 100%;
    width: 50%;
  }
}

.two {
  height: 50%;
  background-color: green;
}

.three {
  height: 50%;
  background-color: blue;
}

<div class="wrapper">
  <div class="one">
  </div>
  <div class="two-three">
    <div class="two">
    </div>
    <div class="three">
    </div>
  </div>
</div>