Как сверстать такое поведение?

Question

[Alex]

Есть контейнер и в нем три элемента.

<div class="wrapper">
  <div>Left</div>
  <div class="new-line">Center</div>
  <div>Right</div>
</div>

На десктопах все три выровняны в один ряд. А вот на мобильных нужно чтобы левый и правый оставались в первом ряду, а центральный перемещался на второй ряд.

Я так понимаю тут нужно использовать CSS-grid. Но в силу своего незнания всё что получилось, так это вот это:

Comments

[Ankhena]

Флексы и order 2 среднему блоку на мобилках.

Answer 1

[Антон]

https://stackoverflow.com/questions/45367864/chang...

Answer 2

[Ankhena]

Гридами: https://codepen.io/anon/pen/xoRVEm?editors=1100
Флексами: https://codepen.io/anon/pen/WqRLNY