Positioning Django objects, with template for loop tags *Struggling to replicate Instagram push and pop of photo location *

Question

I am having difficulty positioning the photo location after a user posts a photo, where the (Purple Gameboy Photo) goes where the (Mansion Photo) is, and where the (American Football Player Photo) goes where the (Purple Gameboy Photo) is, just like Instagram's profile. Where the most recent go to the top left of the photos, and the last posted photos get pushed down to the bottom right

The function checks the first iteration of the for loop and creates a row and column for the first photo, the American Football Player Phot is the first photo posted, then moves along until the fourth photo comes in. Rather than poping the oldest photo to a new row and pushing the newest photo to the front of the existing row. It keeps the location of the first photo and creates a new row for the latest photo.

Profile_Page.html

    <!-- -----------------------------------------ALBUM SECTION---------------------------------------- -->
    <div class="album-section">
      <h2>Albums</h2>
      {% for x in img %}
          {% if forloop.first %}
          <div class="row ">{% endif %}
              <div class="col-4 col-4 col-4" >
                  <div class="text-center mt-2">
                      <a href="{% url 'single_page' x.id %}" ><img src="{{x.file.url}}" href="{% url 'single_page' x.id %}" height="100%" width="100%"  class="myImg"></a>
                  </div>
              </div>
              {% if forloop.counter|divisibleby:3 %}
          </div>

          <div class=row>{% endif %}
              {% if forloop.last %}
          </div>{% endif %}
      {% endfor %}
    </div>

Style.css

.row {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
}