Как поменять блоки местами с помощью css?

Question

[Zbiten]

Есть такой блок:


Как на мобильных устройствах превратить его в такой:

Answer 1

[Ankhena]

Смешно, но проще всего это решается на флоатах
https://codepen.io/anon/pen/mzrPoa

Вариант с order возможен, но заморочист при текущей разметке.
И тогда удобнее в обратном порядке.
Первой должна идти картинка, потом заголовок и текст.
Выстраиваются они с помощью columns в 2 столбца.
А когда в один столбец, вот тогда уже order.

Answer 2

[Andrey_Hmytron]

Я бы сделал через position: absolute;
Как то так:

.box {
    max-width: 700px;
    position: relative;
    padding: 30px 30px 30px calc(50% + 20px);
    .image {
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      height: 100%;
      overflow: hidden;
    }
  }