Flexbox：反向排序并将第一个块放入新行

Question

我有三个街区，需要把第二个和第三个放在第一个之前。这个需要转到另一条线，宽度为100％。

.content{
  display:flex;
  flex-flow: row-reverse wrap;
}

.box1, .box2, .box3{
  height: 200px;
  background: red;
  margin: 10px;
  flex-basis: calc(33.333% - 20px);
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  font-family: sans-serif;
  color: white;
  line-height: 200px;
}

.box2, .box3{
  flex-basis: calc(50% - 20px);
}

.box1{
  flex-basis: calc(100% - 20px);
}

https://codepen.io/marcelo2605/pen/rYvyvK?editors=0110

Answer 1

您可以使用order规则 像这样 .box1 { order: 3 }