使用flex box如何满足我的设计要求？

Question

使用flex box如何满足我的设计要求？

当前代码

如您所见，当前代码我已经沿着弹性框路径实现了我的设计要求但是，此代码输出与我的设计要求屏幕截图不符，我想知道如何实现这一点。

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  display: block;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}

@media screen and (max-width: 720px) {
  .container {
    flex-wrap: wrap;
  }
  .item:nth-child(2) {
    order: 3;
  }
  .item:nth-child(3) {
    margin-left: calc(100% - 200px); /* 200px is width of 2 boxes */
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

基于上面代码的当前输出。

Answer 1

有可能会更容易使用：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#positioning_with_grid-template-areas