Example of auto layout flexbox, with reverse order

flex-row-reverse.css

.flex-parent {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;

  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.flex-item {
  flex-basis: 50%;
  flex-grow: 1;
  min-width: 300px;
}

flex-row-reverse.html

<div class="flex-parent">
  <figure class="flex-item">
    <img
      alt="Double rainbow"
      src="./image.png"
    />

    <figcaption>
      What does it mean?
    </figcaption>
  </figure>
  <!-- .flex-item -->

  <div class="flex-item">
    <p>
      The image will be on the right, on desktop.
    </p>

    <p>
      But it will stack first, for mobile width.
    </p>
  </div>
  <!-- .flex-item -->
</div>
<!-- .flex-parent -->