Dynamically create rows and columns in bootstrap / rails - ruby-on-rails

Question

Using Rails with bootstrap I'm trying to layout a page which will have an unknown number of blocks of content on it. On small screens there should be 1 column, on medium screens 2 columns, and on larger screens 3 columns.
Such as...
However I can't work out how to slice up the content so it works reliably. Currently I have this in my view :
<div class="container">
<% #posts.each_slice(3) do |posts| %>
<div class="row">
<% posts.each do |post| %>
<div class="col-sm-6 col-lg-4">
<img src="<%= post.image %>" class="img-responsive">
<h2><%= post.title %></h2>
<h6><%= post.created_at.strftime('%b %d, %Y') %></h6>
<p> <%= raw(post.body).truncate(358) %></p>
</div>
<% end %>
</div>
<% end %>
</div>
But this produces...
I've tried changing the each_slice(3) and class="col-sm-6 col-lg-4" however regardless of the combinations I choose one of the medium or large views breaks.
How do I reliably achieve the desired effect above regardless of the number of items on the page?

Answer 1

When the content of the columns is the same height, the grid wraps evenly:
http://www.codeply.com/go/8w2INqz3e1
When the content of the columns is different heights, the grid wraps unevenly, causing gaps..
http://www.codeply.com/go/1LBtvtDnzA
To fix this, you need to use responsive resets as described in this answer..
Bootstrap row with columns of different height
For example, a CSS clearfix approach in your case would work like this..
#media (min-width: 1200px) {
.row > .col-lg-4:nth-child(3n+1) {
clear: left;
}
}
#media (max-width: 992px) {
.row > .col-sm-6:nth-child(2n+1) {
clear: left;
}
}
http://www.codeply.com/go/LDqxBlyULr