Содержимое стека Susy на столбец

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 охватывает 4 столбца сетки из 12 столбцов. Первые три divs появляются в одном ряду, последний div переходит к следующему ряду - см. http://codepen.io/anon/pen/meGJVp.

Теперь мне нужно, чтобы последний 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