每列可疑堆栈内容

Question

我有一个基于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的正下方。我该怎么做？

Answer 1

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

<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