<main>
  <figure>
    <img src="http://lorempixel.com/600/300/" alt="photo" width="600" height="300">
  </figure>
  <article>
    <h1>The Title</h1>
    <p>Lorem ipsum dolor sit amet, id augue consul suscipiantur mea, eu explicari molestiae vel, labore detracto ne usu. No commodo equidem perpetua pro. Esse ubique timeam quo ex, nec tritani luptatum ad. Et detraxit legendos lobortis vis, in his partiendo
      maiestatis. His elitr voluptaria te, est eu fugit abhorreant. Sed cu unum suscipit, est adhuc simul in.</p>
    <p>Ad autem nulla singulis sit. Purto phaedrum eu eam, cu tale aliquando vituperata vel. Vis suas efficiantur et, eam summo consul ubique ut. Nulla facilisis interpretaris ne usu. Ad eum ferri labores.</p>
    <p><a href="https://www.sitepoint.com/community/t/columns-to-overlap-page-builder/240707?u=sama74">https://www.sitepoint.com/community/t/columns-to-overlap-page-builder/240707?u=sama74</a></p>
  </article>
</main>

* {
  outline: 1px dotted red;
}

main {
  max-width: 60em;
  margin: 2em auto;
  position: relative;
}

figure {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 45em) {
  figure {
    position: absolute;
    right: 0;
    top: 0;
  }
  article {
    position: relative;
    max-width: 30em;
    padding-top: 1em;
  }
}