How to swap blocks with css?

Question

css

There is this block:

How to turn it into this on mobile devices:

Answer 1

It's funny, but the easiest way to solve this is on floats
https://codepen.io/anon/pen/mzrPoa
The order option is possible, but it's confusing with the current markup.
And then it is more convenient in the reverse order.
The image should go first, then the title and text.
They are lined up using columns in 2 columns.
And when in one column, then already order.

Answer 2

I would do it via position: absolute;
Something like this:

.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;
    }
  }