title: Wrap elements around an image with flexbox (no float), or anything else
body: <p>I am working on a page where I would like a responsive <code>img</code> to align to the left of my <code>section</code> flex container, and the <code>h1</code> &amp; <code>p</code> text the right of the image, using <code>flexbox</code>.</p>
  
  <p>I have more text and elements in the <code>section</code> flex container, but I would like them to be below the <code>img</code>.</p>
  
  <h2>Goal:</h2>
  
  <p><a href="https://i.stack.imgur.com/rrenr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rrenr.png" alt="FLEX GOAL"></a></p>
  
  <p>I am using <a href="http://codepen.io/omarjuvera/pen/yORymp" rel="nofollow noreferrer">codepen</a> as a sandbox to get things done. But for some reason, the <code>h1</code> is not horizontal but aligning vertically. The image is not keeping it's aspect ratio as the screen size decreases. And the rest of the elements won't stack below each other.</p>
  
  <p>For small screens I would like the elements to just stack below each other in this order:</p>
  
  <ol>
  <li><code>img</code></li>
  <li><code>h1</code></li>
  <li><code>p</code></li>
  <li><code>a</code></li>
  <li><code>a</code></li>
  </ol>
  
  <p>etc...</p>