Bootstrap 3> пытается создать столбцы с равными высотами

Я только что начал учиться, поэтому, пожалуйста, придерживайтесь меня, и я постараюсь предоставить как можно больше информации.

Использование Bootstrap 3 Я пытаюсь настроить несколько областей содержимого так, чтобы они имели одинаковую высоту. У меня есть 4 в строке с неопределенным количеством столбцов (я прохожу через php-массив, чтобы определить это). По сути, независимо от того, сколько областей содержимого мне нужно отображать, они должны использовать одну и ту же высоту или, по крайней мере, такую ​​же высоту, как и другие три в ней.

Я использую эту библиотеку jquery > https://github.com/mattbanks/jQuery.equalHeights > , которая отлично работает, но всякий раз, когда я изменяю размер страницы, высоты областей содержимого не обновляйте (если я перетащить экран на новый размер и нажмите "Обновить", высота вернется в правильное положение)

Я также рассмотрел несколько других решений, таких как Twitter Bootstrap - одинаковые высоты в столбцах жидкости, но это не работает, когда я настраиваю его для несколько строк.

Любая помощь будет оценена, будь я должен использовать javascript-решение или что-нибудь, что я могу делать с CSS. Помня об этом, мне нужно, чтобы высоты были согласованными, и для этого нужно было отрегулировать размер экрана. Я бы предпочел использовать Bootstrap 3, но если решение доступно для 2, я буду использовать эту версию.

<div class = "container">
<div class="row">
    <div id="equalheight">      

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>              

    </div>
</div>

Выше мой html, вторая область содержимого имеет большой объем копии

<script>
    $('#equalheight div').equalHeights();
</script>

<script>
    $(window).resize(function(){
       $('#equalheight div').equalHeights(); 
    });
    $(window).resize();
</script>   

Выше мой Javascript, вызывающий ранее упомянутую библиотеку.

Спасибо за помощь/совет