title: How to make text wrapable around following, floated element?
body: <p>HTML:</p>
  
  <pre><code>&lt;div class="heading"&gt;
    &lt;h2 class="text"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/h2&gt;
    &lt;a class="action" href="#"&gt;Print&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Desired default look:</p>
  
  <pre><code>| Lorem ipsum dolor sit      [Print] |
  | amet, consectetur adipiscing elit. |
  </code></pre>
  
  <p>Desired look on small screen (using media-queries):</p>
  
  <pre><code>| Lorem ipsum dolor sit |
  | amet, consectetur     |
  | adipiscing elit.      |
  | [Print]               |
  </code></pre>
  
  <p>Not desired:</p>
  
  <pre><code>|                            [Print] |
  | Lorem ipsum dolor sit amet,        |
  | consectetur adipiscing elit.       |
  </code></pre>
  
  <p>Not desired:</p>
  
  <pre><code>| Lorem ipsum dolor sit      [Print] |
  | amet, consectetur                  |
  | adipiscing elit.                   |
  </code></pre>
  
  <p>Remarks:</p>
  
  <ul>
  <li>Text may be any long.</li>
  <li>Action element is constant height and variable width.</li>
  </ul>
  
  <p>I see no way to do this using only CSS.</p>
  
  <p>Right now I use JS (<a href="http://harvesthq.github.io/harvey/" rel="nofollow">Harvey</a> lib) to put floated DOM element before text on bigger screen.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>/// EDIT - moved to answer</strong> (sorry for mess)</p>