浮動權不走一路向上的浮動的存在留下元素

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">