浮动权不走一路向上的浮动的存在留下元素

Question

我已经安排我在DOM块，为了我希望他们在较小的视口，但我无法弄清楚如何使块5下次去了在较大的屏幕上阻止3。在我的实现中，块的高度不会固定。

看到我的笔，我希望它解释了我最多。

http://codepen.io/pirksts/pen/MyjBmP

HTML

<div class="wrap"> 
    <div class="block block--right">1</div> 
    <div class="block block--left">2</div> 
    <div class="block block--left">3</div> 
    <div class="block block--left">4</div> 
    <div class="block block--right"> 
     5. Why I dont go to next to block 3 ?? 
    </div> 
</div> 

CSS

.wrap { 
    overflow: hidden; 
    max-width: 400px; 
    background-color: gray; 
    padding: 20px 20px 0 20px; 
} 
.block { 
    width: 140px; 
    height: 140px; 
    margin-bottom: 20px; 
    padding: 20px; 
} 
.block--left { 
    clear: left; 
    float: left; 
    background-color: blue; 
} 
.block--right { 
    float: right; 
    background-color: red; 
} 

Answer 1

我只是需要一个包装为2,3,4和漂浮它作为一个大的块，不是所有的块分开，在这里是答案http://codepen.io/pirksts/pen/mPrzPo

See <div class="main-info">