title: Forcing list to flow around div element in responsive page layout using CSS
body: <p>I am creating a responsive site and the blue boxes below are "News" items. The white box is a teaser-kind-of box with different styling.</p>
  
  <p>(These boxes are just a cut out of a bigger floated box-flow with lots of different types of boxes.)</p>
  
  <p>The problem is to be able to flow the news-items around the teaser box on desktop mode and then separating/tiling them in the mobile layout. </p>
  
  <p>Markup-wise the news list is contained in a div with 4 divs inside. I think this is the big problem. Putting another div in the same level as the news items wouldn't be a problem. I am seeking any ideas or tips about any super-frameworks.</p>
  
  <p><img src="https://i.stack.imgur.com/i2TeB.png" alt="enter image description here"></p>
  
  <p>Please feel free to mess up this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/m4Pr9/" rel="nofollow noreferrer">http://jsfiddle.net/m4Pr9/</a></p>
  
  <p><strong>MARKUP</strong></p>
  
  <pre><code>&lt;div class="box-layout"&gt;
      &lt;div class="box list-container"&gt;
          &lt;div class="box news-box"&gt;This is a news item&lt;/div&gt;
          &lt;div class="box news-box"&gt;This is a news item&lt;/div&gt;
          &lt;div class="box news-box"&gt;This is a news item&lt;/div&gt;
          &lt;div class="box news-box"&gt;This is a news item&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box teaser-box"&gt;This is the teaser box&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body{
   width: 400px;   
  }
  .box-layout{
      width: 400px;
      border: 2px solid red;
      overflow: hidden;
      position: relative;
      padding: 10px;
      color: #fff;
  }
  .clear{
      clear:both;
  }
  .box{
      float: left;
  }
  .list-container{
      background: #509EB8;
  
  }
  .news-box{
      width: 100%;
      background: #003057;
      margin: 5px;
      height: 60px;
  }
  
  .teaser-box{
      background: #B03C3F;
      height: 135px;
      width: 100px;
      float: right;
  }
  </code></pre>