Доработать нескончаемую прокрутку в django

django+bootstrap
Имеется страничка с бесконечной прокруткой, но сейчас она работает некорректно.
Дано:
Есть queryset с новостями. Новость делится на типы: большая и маленькая. Если новость большая, то она идет в большой div(col-lg-8), если новость маленькая, то в маленький div(col-lg-4).

Проблема:
Из-за того, что pagination всегда статичное значение, а кол-во маленьких и больших новостей разное - появляются row, которые заполнены на 1/3 или 2/3. См. скрин.
Надо предоставить решение для корректного отображения - например с динамической пагинацией или div с новой страницы вставали в один row с div предыдущей страницы.



Код:

<div class="container">
 <div class="article-feed">
     <div class="row iscroll">
    {% for art in all %}
     {% if art.banner_page %}
<div class="col-lg-8 mb-2 mt-2">
<img class="card-img-top" src="{{art.banner.url}}" >
</div>
   {% else %}
 div class="col-lg-4 mb-2 mt-2 ">
 <img class="card-img-top" src="{{art.banner.url}}" >
 </div>

         {% endif %}{% endfor %}
 <p class="pagination">
 <a class="pagination__next" href="?page={{ page_obj.next_page_number }}">
 </a></p>
 <script src="{% static "js/infinite-scroll.pkgd.min.js" %}"></script>
   <script>
 $('.article-feed').infiniteScroll({
   path: '.pagination__next',
   append: '.iscroll',
 });
   </script>