父包装时更改弹性方向

Question

鉴于我们有3个divs，如下所示：

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

.square {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

<div class="container">
  <div class="square blue">A</div>
  <div class="square red">B</div>
  <div class="square green">C</div>
</div>

目标

当所有元素都适合同一行时，我们要按以下顺序显示：

A | B | C

但是，当元素不适合同一行时，我们需要将它们显示如下：

A

C | B

总结：使B | C跳至下一行并将其订单交换为C | B。

到目前为止，这是我们一直在尝试的方法，没有找到一种方法来反转 B和C的顺序（仅在换行时）：

.container {
  display: flex;
}

.wrapper {
  display: flex;
}

.square {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

<div class="container">
  <div class="square blue">A</div>
  <div class="wrapper">
    <div class="square red">B</div>
    <div class="square green">C</div>
  </div>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->