How to correctly lay out the same blocks in bootstrap?

Question

css

Hello. Quite a standard problem, but I have not found a solution.
There are an indefinite number of blocks that are shown in the grid. For display, a bootstrap is used, for reasons of adaptability. (There is a requirement, 3 columns on large screens, 2 on smaller ones, 1 on mobile phones) Unfortunately, the bootstrap lined up the height of the columns as it pleased, but it is necessary that the columns in the same row be of the same size.

<div class="container row">
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
      <div class="col-xs-12 col-sm-6 col-md-4">блабла</div>
</div>

There is a solution to insert special divs where lines end ( <div class=clearfix></div>) but the problem is that lines end differently on different devices.
It remains only to calculate the height through javascript, but this is not very correct in this case.
Is there a way to align columns using css? I'm not very familiar with bootstrap, maybe I missed something.

Answer 1

Simple solution:
Limit column height with max-height: XXXpx;.
And put text-overflow: ellipsis;.
On click or :hover open the entire block.
or More difficult:
Make up three columns and proportionally shove blocks across them. But this option is only suitable for a fixed layout. Flex-box
or Complex but simple:
Use masonry.js .
PS The clearfix class is used for completely different purposes.

Answer 2

It's almost 2016 and you're all using the old ways, it's long overdue to use Flexbox, it's already well supported and it works in all modern browsers and it's not a headache