как сделать петлю начальной загрузки сетки

Question

Я пытаюсь сделать это следующим образом: https://getbootstrap.com/docs/4.3/examples/pricing/ показывает экран, разделенный на три части, так что должно быть так, я думаю ...

 <div class="row mb-2">
            <div class="col-4 bg-danger">
                .col-4
            </div>
            <div class="col-4 bg-warning">
                .col-4
            </div>
            <div class="col-4 bg-success">
                .col-4
            </div>
        </div>

НоПроблема в том, что я использую шаблон django jinja и цикл.поэтому он группирует весь контент.

Это мой код, но он не будет работать так, как в ссылке

<div class="row">
  <div class="col-6 col-md-4">
        <div class="card">
        {% for all_episode in episode %}
        <a href="{% url 'episode_detail' slug=all_episode.slug %}"><img class="card-img-top" src='{{all_episode.image.url}}'></a>
            <div class="card-body">
                <h5 class="card-title">
                  <a href="{% url 'episode_detail' slug=all_episode.slug %}">{{ all_episode.title }}</a>
                </h5>
                <p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
            </div>

<div class="card-footer">
                <small class="text-muted">
                  <span class="h5">
                  <a href="{% url 'series_detail' slug=all_episode.series.slug %}">{{ all_episode.series }}</a>
                </span> / 
            <span class="h6"><a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}</a></span></small>
            </div>
        {% endfor %}




    </div>
  </div>