Динамически Как расположить сетку bootstrap по вертикали для категорий мегаменю

Question

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

Я хочу отобразить мегаменю категорий с использованием системы координат bootstrap, но в вертикальной последовательности

HTML:

<div class="menu-sub" id="mega_id">
<div class="col-md-8" style="">
    <div class="">
        {% for category in cateogries %}
            <div class="col-md-3" style="">
                <h3 class="menu-category">
                    <a style="text-transform: uppercase;" href="#0" target="_blank"
                        {{category.name}}
                    </a>
                </h3>
                <ul class="ul-height">
                    {% category_child category.id as childs %}
                    {% for child in childs %}
                        <li><a class="child-a" href="#0" target="_blank">{{child.name}}</a></li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    </div>
</div>
<div class="col-md-4" style="text-transform: uppercase !important;">
    <div class="menu-col col-r-100">
        <!- Other siderbar -->
    </div>
</div>

проверьте изображение для справки.