Django blogs not looping properly

Question

I have created a blog with Django that I originally looped through each post with:

<div class="container">

<h2 class="latest-posts">Latest Posts</h2>
<hr />

{% for post in posts.all %}

<h4><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></h4>
<i class="fa fa-calendar" aria-hidden="true"></i> {{ post.pub_date_pretty }}

<img src="{{ post.image.url }}" class="img-responsive center-sm-block" style='width:75%; text-align:center;' />
<br/>
<p>{{ post.summary }}</p>
<br/>
<br/>

{% endfor %}

</div>

Which worked great! But I didn't just want to have a linear list of post and wanted to display each unique post in a bootstrap card which I attempted with this solution:

<div class="container">
    <h2 class="latest-posts">Latest Posts</h2>
    <hr />

    {% for post in posts.all %}

    <div class="row">

        <div class="col-12 col-md-6">
            <!-- Card -->
            <article class="card animated fadeInRight">
                <div class="card-block">
                    <h4 class="card-title"><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></h4>
                    <h6 class="text-muted">Antoine de Saint-Exupéry</h6>
                    <p class="card-text">{{ post.summary }}</p>
                </div>
                <div class="card-block text-center">
                    <div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
                        <a href="#" class="card-link">Read more</a>
                    </div>
                </div>
                <img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
            </article><!-- .end Card -->
        </div>

        <div class="col-12 col-md-6">
            <!-- Card -->
            <article class="card animated fadeInRight">
                <div class="card-block">
                    <h4 class="card-title"><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></h4>
                    <h6 class="text-muted">Antoine de Saint-Exupéry</h6>
                    <p class="card-text">{{ post.summary }}</p>
                </div>
                <div class="card-block text-center">
                    <div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
                        <a href="#" class="card-link">Read more</a>
                    </div>
                </div>
                <img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
            </article><!-- .end Card -->
        </div>

    </div>

    {% endfor %}

</div><!-- End container -->

However each unique post now displays twice in a card:

First row of posts

Second row of posts

Any help would be greatly appreciated! This is my first Django project and I have gotten pretty far already. However this is tripping me up quite badly.

Edit: Just to clarify I need to have a second post in that card is what I'm asking. I want two cards displayed side by side, each with a unique post

Answer 1

<div class="container">
    <h2 class="latest-posts">Latest Posts</h2>
    <hr />

    {% for post in posts.all %}

       {% if forloop.counter0|divisibleby:2 %}

       <div class="row">
       {% endif %}

          <div class="col-12 col-md-6">
              <!-- Card -->
              <article class="card animated fadeInRight">
                  <div class="card-block">
                      <h4 class="card-title"><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></h4>
                      <h6 class="text-muted">Antoine de Saint-Exupéry</h6>
                      <p class="card-text">{{ post.summary }}</p>
                  </div>
                  <div class="card-block text-center">
                      <div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
                          <a href="#" class="card-link">Read more</a>
                      </div>
                  </div>
                  <img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
              </article><!-- .end Card -->
           </div>


        </div>

    {% if forloop.counter|divisibleby:2 == False %}
    </div>
    {% endif %}

    {% endfor %}

 // When lenght of posts is even the <div> is not close. Close it!</div>
{% if posts.all|length|divisibleby:2 == False %}

    </div>
    {% endif %}

</div><!-- End container -->