title: Wrap floated text at smaller screen widths?
body: <p>Im floating a heading to the left and a div containing a few links to the right. At wide screen widths everything is fine. </p>
  
  <p>At smaller widths the links appear under the heading. Instead I need the heading to wrap. </p>
  
  <p>My content is dynamic, the heading text will vary in length and the number of links with vary also. Therefore I dont believe I can use % widths. </p>
  
  <p>I can alter the HTML however I need to keep the heading above the links in the HTML. This is because for the smallest media query the heading will be above the links. </p>
  
  <p><img src="https://i.stack.imgur.com/6ddIp.jpg" alt="enter image description here"></p>
  
  <p><a href="http://codepen.io/anon/pen/OPxbxG" rel="nofollow noreferrer">http://codepen.io/anon/pen/OPxbxG</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;h1&gt;Title goes here&lt;/h1&gt;
    &lt;div class="links"&gt;
      &lt;a href="#"&gt;Link one&lt;/a&gt;
      &lt;a href="#"&gt;Link two&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .container {
    background: grey;
    width: 60%;
    margin: auto;
    overflow: auto;
  }
  h1 {
    float: left;
    margin: 0;
  }
  .links {
    float: right;
  }
  </code></pre>