<div class="flex v1">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>
<hr />
<div class="flex v2">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>
.block {
  width: 100px;
  height: 100px;
  background-color: tomato;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flex.v1 {
  width: 210px;
}

.flex.v1 .block:nth-child(2) {
  order: 2;
  width: 100%;
}

.flex.v1 .block:last-child {
  order: 1;
}

.flex.v2 {
  height: 210px;
  width: 200px;
  flex-direction: column;
}

.flex.v2 .block:last-child {
  height: 100%
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.