Flexbox: reverse order and put first block in a new line

Question

I have three blocks and need to put the second and the third before the first. This one needs to go to another line, with 100% width.

.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

you could use the order rule like this .box1 { order: 3 }