如何在调整大小时将同位素盒放入下一行？

Question

你能帮我解决这个问题吗？我正在创建一个具有同位素效应的页面。我的问题是我没有得到我想要的确切布局。在我的同位素中，我有一个大盒子，正常和小。在我的例子中，我在第一列中有一个大盒子。现在我添加了4个普通盒子。

我想要的是这样的：

我得到的是这样的：

我如何安装下面的2个框？

这是我的一些代码：

HTML

<div class="isotope js-isotope" data-isotope-options='{ "layoutMode": "fitRows", "itemSelector": ".item" }'>

      <div class="item wbig"></div>
      <div class="item wnormal"></div>
      <div class="item wnormal"></div>
      <div class="item wnormal"></div>
      <div class="item wnormal"></div>

    </div>

CSS

.isotope {
  background: #DDD;
  max-width: 1200px;
}

/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .item ---- */

.isotope .item {
  float: left;
  width: 100%;
  height: auto;
  background: #0D8;
  border: 1px solid #000;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.item.wbig { width: 380px; height: 380px; }
.item.wnormal { width: 190px; height: 190px; }
.item.wsmall { width: 95px; height: 95px; }

JS

 $('.isotope').isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 100
    }
  });

我希望在调整浏览器大小时完全适合这些框。

所有人都感谢。 ：）

这里有一些小提琴：

http://jsfiddle.net/rochellecanale/s8r1sta3/