Как построить такую сетку?

Question

[HelenaS]

У меня вот такая структура блоков:

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="banner"></div>
</div>

.box {
    display:block;
}
.item {
    width: 100px;
    height: 100px;
    float: none;
    clear: both;
}  

.banner {
    width: 200px;
    height:400px;
    display: block;
    float: right;
}

Мне нужно сделать обтекание большого блока маленькими. Float задала большому, при этом обтекание не происходит. Большой блок просто оказываться последним.
Вот такой результат нужен:

Comments

[Rustam Bainazarov]

Ха-ха-ха, классная картинка.

[origami1024]

Рустам Байназаров, нужен pixelperfect с адаптивом

[Rustam Bainazarov]

origami1024, no-no-no…

Answer 1

[Сергей Щучкин]

https://jsfiddle.net/stc4ozjn/

Comments

[HelenaS]

Спасибо. Увидела в чем была моя ошибка структуре - .baner у меня был в конце.