title: Bootstrap 3 grid with different height in each item - is it solvable using only CSS?
body: <p>I'm trying to make a grid of thumbnails, where each thumbnail has an image and a label. It works fine if all the labels have the same length, because then all the thumbnails have the same height:</p>
  
  <p><a href="http://www.bootply.com/iSqwWyx5ms">http://www.bootply.com/iSqwWyx5ms</a></p>
  
  <p>However, if I shorten the rightmost thumbnail's text, part of the row below gets pushed into a new row, as shown here:</p>
  
  <p><a href="http://www.bootply.com/Wqd021aaeM">http://www.bootply.com/Wqd021aaeM</a></p>
  
  <p>What I would like is the second row to start from the lowest point in which the first row ended.</p>
  
  <p>I know I can solve it with JavaScript - find the longest thumbnail in each row and set the other thumbnails to have that height. Question is, do I have any way of doing it, or something else that can solve my problem, using only with CSS?</p>
  
  <p>Update: I don't know beforehand how many items I have in one row. For example, on a small screen I'd have 2 items in a row, while on a bigger screen it'll be 3, so solutions which set when a new row starts aren't good for me.</p>