Bootstrap 3 grid with different height in each item - is it solvable using only CSS?

Question

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:

http://www.bootply.com/iSqwWyx5ms

However, if I shorten the rightmost thumbnail's text, part of the row below gets pushed into a new row, as shown here:

http://www.bootply.com/Wqd021aaeM

What I would like is the second row to start from the lowest point in which the first row ended.

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?

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.

Answer 1

You should use .clearfix, as described at the Grid responsive resets section of the Bootstrap documentation: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

Answer 2

If you don't know how many columns you have, you can do:

.row.fix {   display: flex;   flex-wrap: wrap;   width:100%; /*not always necessary*/ } 

Working fiddle: https://jsfiddle.net/wqdm1jjt/

Example:

Author: Juan Miguel