每列的 Susy 堆栈内容

Susy stack content per column

我有一个基于 susy 网格的网页,内容如下:

<div class="container">
  <div class="column-gallery-item">
    <p>Who's down there? Can't see!</p>
  </div>
  <div class="column-gallery-item">    
    <p>Lots<br>and lots<br>and lots<br>of content</p>    
  </div>
  <div class="column-gallery-item">
    <p>Not much here</p>
  </div>

  <div class="column-gallery-item">    
    <p>I want to move up!</p>    
  </div>
</div>

每个 div 跨越 12 列网格的 4 列。前三个 div 出现在一行中,最后一个 div 移到下一行 - 请参阅 http://codepen.io/anon/pen/meGJVp

现在我需要最后一个 div 向上移动,直接低于第一个。我该怎么做?

如果您希望项目堆叠在网格中第一个项目的下方,那么唯一的方法是将其嵌套在同一列中:

<div class="column-gallery-item-stacked">  
<div class="nested-column-gallery-item">
    <p>Who's down there? Can't see!</p>
</div>
<div class="nested-column-gallery-item">    
    <p>I want to move up!</p>    
</div>
</div>

看这里:http://codepen.io/anon/pen/QjVjMK