title: Make fluid-sized block stick to top corner and allow content flow around it, but remain below content at certain breakpoints.
body: <p>I've created a codepen to demonstrate the effect and what I want to achieve.   It's not that complicated a problem, but I'm not sure how to be more concise and direct.</p>
  
  <p><a href="http://codepen.io/anon/pen/KwoeqR" rel="nofollow">http://codepen.io/anon/pen/KwoeqR</a></p>
  
  <p>What I want is to have a variable-width block of text that, when flowing normally, is below a block of content.  But, through breakpoints and media queries, becomes stuck to the top right corner of the content, and allows the content to flow around it.</p>
  
  <p>It's very easy to achieve one-half of the equation, or the other.  I can achieve a floating top-right aligned block with this:</p>
  
  <p>CSS:</p>
  
  <pre><code>.floater {
    float: right;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="floater"&gt;&lt;/div&gt;
  &lt;p&gt;A bunch of content text.&lt;/p&gt;
  </code></pre>
  
  <p>But when, through a media query, the floater no longer floats, it sits above the content.  It needs to sit below.</p>
  
  <p>To make it sit below, I can just do this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;A bunch of content text.&lt;/p&gt;
  &lt;div class="floater"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But now it won't float properly - it does not stick to the top right corner.</p>
  
  <p>Solutions I have tried:</p>
  
  <ul>
  <li><p>Absolute positioning:
  This might work if the block were a fixed width.  Instead it is a variable width so I can't simply set margins on the content.</p></li>
  <li><p>Flexbox:
  A flex column reserves the space below it, instead of allowing other columns/content to flow into it.  If there is a way to get a flex column to flow or float, that would work, but I have not found one.</p></li>
  </ul>
  
  <p>I hope this makes sense.  It sounds very particular and precise but it really is not.  It's a simple layout problem that does not seem to have a simple answer, unless I am missing it!</p>