Django forloop изменяет шаблон после x-элемента

Привет, я пытаюсь добиться пользовательской сетки в bootstrap 4 с помощью счетчика forloop. К сожалению, что-то заставляет элементы рассыпаться. Я знаю, что близок к достижению этой цели, но я пытаюсь сделать это в течение нескольких часов, и все равно у меня ничего не получается.

Мой код:

    {% for article in healtharticles %}
    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
        <!-- News block -->
        {% if forloop.counter0 < 1 %}
        <div>
        
          <!-- Featured image -->
          <div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4" data-mdb-ripple-color="light">
            <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
            </a>
          </div>

          <!-- Article data -->
          <div class="row mb-3">
            <div class="col-6">
              <a href="" class="text-info">
                <i class="fas fa-plane"></i>
                Travels
              </a>
            </div>

            <div class="col-6 text-end">
              <u> 15.07.2020</u>
            </div>
          </div>

          <!-- Article title and description -->
          <a href="" class="text-dark">
            <h5>This is title of the news</h5>

            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
              id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
              adipisci iusto nam temporibus modi animi laboriosam?
            </p>
          </a>
          {% else %}
          <hr />

          <!-- News -->
          <a href="" class="text-dark">
            <div class="row mb-4 border-bottom pb-2">
              <div class="col-3">
                <img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
                     class="img-fluid shadow-1-strong rounded" alt="" />
              </div>

              <div class="col-9">
                <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                <p>
                  <u> 15.07.2020</u>
                </p>
              </div>
            </div>
          </a>
          

        </div>
        {% endif %}
        <!-- News block -->
      </div>
    {% endfor %}

Может быть, у кого-то есть идеи, что не так.

{% if forloop.counter0 < 1 %}
<div>
......
 </a>
</div> <!-- Close div here-->
{% else %}
<div> <!-- Open div here -->
.....
</div>
{% endif %}