Responsive re-positioning div with css

Question

I am trying to get my page layout like this:

desktop view:

|---------------|--------|
| block 1       | block2 |
|               |        |
|               |--------|
|               | block3 |
|               |        |

mobile view:

|---------------|
| block 2       |
|---------------|
| block 1       |
|               |
|               |
|---------------|     
| block 3       |
|---------------| 

at the moment i able to position block 1 and 2 with flex-wrap flex-directionand width of blocks.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.block1 {
  width: 66%;
}

.block2 {
  width: 33%;
}

@media (max-width: 580px) {
  .block1, .block2 { width: 100%; }
  .container { flex-direction: column-reverse; }
}

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
</div>

How to position block 3?

Answer 1

You can do it like this:

body {margin: 0}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100vh; /* height needs to be defined otherwise not possible with flex */
}

.block1 {background: khaki}
.block2 {background: lightgreen}
.block3 {background: lightblue}

.block1 {flex-basis: 100%; width: 66.66%}
.block2, .block3 {flex: 1; width: 33.33%}

@media (max-width: 580px) {
  .container > * {width: initial}
  .block1 {flex: 2} /* makes it twice as "tall" */
  .block2 {order: -1} /* placed above .block1; it's 0 by default */
}

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
  <div class="block3">Block 3</div>
</div>