Как построить динамический заголовок: строка начальной загрузки и столбцы или таблица?

Question

Мне нужен баннер для моего веб-приложения / панели инструментов, который будет заполнен кнопками и списками, которые будут зажигать либо php / sql / ajax (будущий шаг). Я бутстрэп / css noob, и я не знаю, правильно ли я это делаю.

Я сделал эту первую попытку, просто загрузив строки и столбцы: http://prntscr.com/m835c7. Меня не волнуют "красивые" вещи.

<div id="header" class="container-fluid">
<div class="row">
    <div class="col-sm-1" style="background-color:lavender;">
        <h2>WORLD</h2>
    </div>
    <div class="col-sm-3" style="background-color:lightcyan;">

        <div class="row h-50">
            <div class="col-12">
            <h1>HUMAN</h1>
            </div>
        </div>
        <div class="row h-50" style="background-color:green;">
            <div class="col-12">
            <h1>Country LIST</h1>
            </div>

        </div>
    </div>
    <div class="col-sm-2" style="background-color:lightgray;">
        <div class="row h-50">
            <div class="col-12" style="background-color:lightgreen;">
            <h1>ZONE</h1>
            </div>
        </div>
        <div class="row h-50">
            <div class="col-12">
            <h1>CLUSTER</h1>
            </div>
        </div>
    </div>
    <div class="col-sm-2" style="background-color:lavenderblush;">
        <div class="row">
            <div class="col-12">
            <h2>1 HOUR</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
            <h2>2 HOUR</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
            <h2>3 HOUR</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
            <h2>4 HOUR</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
            <h2>DAILY</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
            <h2>HUMAN</h2>
            </div>
        </div>

    </div>
    <div class="col-sm-4" style="background-color:blue;">
        <div class="row">
            <div class="col-12">
            <h2>PLANT LIST</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
            <h2>PLANT LIST</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
            <h2>PLANT LIST</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
            <h2>PLANT LIST</h2>
            </div>
        </div>

    </div>
</div>
</div>

Что мне действительно нужно знать: могу ли я динамически добавить какой-то список в последний столбец? (Я мог бы сделать это, если бы это был стол)

Могу ли я установить максимальную высоту жатки? Этот файл всегда присутствует на странице. Должен ли я определить высоту в index.php или в этом файле?

Заранее спасибо, не стесняйтесь обращаться ко мне, если это не было достаточно ясно