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

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

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

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

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