用css响应重新定位div

Question

我正试图让我的页面布局像这样：

桌面视图：

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

移动视图：

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

目前我能够使用flex-wrap flex-direction和块宽度来定位第1和第2块。

.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>

如何定位第3块？