Высота столбца в сетке bootstrap 4 с рядными столбцами

Question

В приведенном ниже коде у меня есть сетка bootstrap, использующая атрибут row-col. Моя проблема заключается в том, что при переносе столбцов они не сохраняют высоту самых больших столбцов из предыдущих «строк». Есть ли способ, чтобы обернутые столбцы сохраняли высоту другого наибольшего столбца?

Пытаясь выяснить, есть ли разумный способ добиться этого в кадре начальной загрузки, тривиальные решения, такие как "минимальная высота", не являются приемлемо.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container-fluid">
    <div class="row row-cols-2 row-cols-md-4" id="cordContainer">
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="https://i0.wp.com/www.impact-media.be/wp-content/uploads/2019/09/placeholder-1-e1533569576673-960x960.png">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="http://www.nebero.com/wp-content/uploads/2014/05/placeholder.jpg">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="https://bulma.io/images/placeholders/480x640.png">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="https://bulma.io/images/placeholders/480x640.png">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="http://www.nebero.com/wp-content/uploads/2014/05/placeholder.jpg">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
    </div>
    <div class="row row-cols-1" id="otherItemsContainer">
    </div>
</div>

https://jsfiddle.net/ak7nb9mx/

Answer 1

Если JS является опцией:

$( document ).ready(function() {
    var maxVal = 0;
    document.querySelectorAll('#cordContainer > .col').forEach(function(value, index) {
        if (parseInt(value.offsetHeight) > maxVal) maxVal = parseInt(value.offsetHeight);
    });
    document.querySelectorAll('#cordContainer > .col').forEach(function(value, index) {
        value.style.height = maxVal + "px";
    });
});