Flexbox: расширение элемента для заполнения строки

Question

Я пытаюсь изменить свой макет на мобильном телефоне с помощью flexbox и столкнулся с проблемой. Я хотел бы, чтобы средняя коробка (2) отображалась на своей линии со 100% шириной на мобильном устройстве. Я использовал order: 1, чтобы переместить окно в конец, но теперь я не могу понять, как отобразить окно во всю ширину.

.left, .middle, .right {
  background-color: rgba(84, 97, 156, 0.2);
  height: 100px;
  padding: 20px;
  margin: 5px;
  border-radius: 4px;
  color: rgb(84, 97, 156);
}

.right {
  text-align: right;
  flex-grow: 1;
 }
 
.middle {
  text-align: center;
  order: 1;
}

.table-row {
  display: flex;
}

<div class="table-row">
  <div class="left">1</div>
  <div class="middle">2</div>
  <div class="right">3</div>
</div>

Answer 1

Здесь вы можете изменить размер видимой области https://jsfiddle.net/mtukb38r/

.table-row {
  display: flex;
}

.left, 
.middle, 
.right {
  background-color: rgba(84, 97, 156, 0.2);
  height: 100px;
  padding: 20px;
  margin: 5px;
  border-radius: 4px;
  color: rgb(84, 97, 156);
}

.right {
  text-align: right;
  flex-grow: 1;
 }
 
.middle {
  text-align: center;
}

@media only screen and (max-width: 600px)  {
  .table-row {
    flex-wrap: wrap;
  }
  .middle {
    text-align: center;
    order: 1;
    width: 100%;
  }
}

<div class="table-row">
  <div class="left">1</div>
  <div class="middle">2</div>
  <div class="right">3</div>
</div>

в основном это на рабочем столе

.table-row {
  display: flex;
}

.left, 
.middle, 
.right {
  background-color: rgba(84, 97, 156, 0.2);
  height: 100px;
  padding: 20px;
  margin: 5px;
  border-radius: 4px;
  color: rgb(84, 97, 156);
}

.right {
  text-align: right;
  flex-grow: 1;
 }
 
.middle {
  text-align: center;
}

<div class="table-row">
  <div class="left">1</div>
  <div class="middle">2</div>
  <div class="right">3</div>
</div>

и это на мобильном телефоне

.table-row {
  display: flex;
}

.left, 
.middle, 
.right {
  background-color: rgba(84, 97, 156, 0.2);
  height: 100px;
  padding: 20px;
  margin: 5px;
  border-radius: 4px;
  color: rgb(84, 97, 156);
}

.right {
  text-align: right;
  flex-grow: 1;
 }
 
.middle {
  text-align: center;
}

.table-row {
  flex-wrap: wrap;
}
.middle {
  text-align: center;
  order: 1;
  width: 100%;
}

<div class="table-row">
  <div class="left">1</div>
  <div class="middle">2</div>
  <div class="right">3</div>
</div>