How to make blocks the same height when the browser window changes?

Question

JavaScript

There is a little code so that the height of all blocks in one class is the maximum height in this set.
The function is called when the page is loaded and when the window is resized.

jQuery(window).resize(function() {
        resizeBlockEach('.myclass');
});

function resizeBlockEach(classElement) {
    var maxHeight = 0;
    $(classElement).each(function(i,elem) {
        if($(this).height() > maxHeight) maxHeight = $(this).height();
    });
    $(classElement).height(maxHeight);
}

When loading the page and resizing, without changing the bootstrap grid, everything works fine. If the screen size change occurs, the css bootstrap grid is rebuilt, then my code does not work, or rather, it probably works first, and then rebuilds the CSS from the bootstrap.

To make it clearer, here's an example. When resizing, the height is aligned, when the grid is triggered from the bootstrap, it is no longer there.
codepen.io/Atach/pen/VaGaqp

Answer 1

start using flexbox and stop sculpting crutches at a time when methods for your task have long been implemented