Как мне сделать чтобы блоки шли в 3 ряда а потом опускалися в низ и опять в три ряда

Я делаю новостную афишу и хочу чтобы блоки и информацией шли в три ряда то есть 3x3 но когда я добовляю 4 блок получается что он уходит левее

шаблон

{% extends "ShapeHtml/wrapper.html" %}
{% block content %}

<div class="row">
    <div  class="col-lg-1 col-md-1"></div>
    <div style="background-color:white; height: 500px ; widht: 100% ;" class="col-lg-3 col-md-3">


        <h1>Search for posts</h1>
        <form action="{% url 'post_search' %}" method="get">
            <h3>Search</h3><input  style=" border: 3px solid #4242A3; border-radius: 15px ; " type="text" name="search" value=" search "> <br>
            <br>
            <br>
            <input type="submit" value="Search">
        </form>
    </div>
    <div  class="col-lg-1 col-md-1"></div>
    <div  class="col-lg-8 col-md-8"></div>
<h1>Posts containing "{{ query }}"</h1>
    <h3>Found {{ total_results }} result{{ total_results|pluralize }}</h3>
    {% for result in results %}
            <div class="panel panel-default" id="next-block">
                          <div class="panel-heading">
                  <p><img src="{{ MEDIA_URL }}{{ result.img.url }}"/></p>
          </div>
 <div class="panel-body">
        {% with object_list=result %}
            <h4><a href="{% url 'article_detail' result.pk %}">{{ result.title }}</a></h4>
            {{ result.body|truncatewords:5 }}
        {% endwith %}
          <h3 align="right">{{result.date|date:"d-m-Y"}}</h3>

          </div>
          </div>
    {% endfor %}
    {% for article in object_list  %}

        <div class="panel panel-default" id="next-block">
          <div class="panel-heading">
                  <p><img src="{{ MEDIA_URL }}{{ article.img.url }}"/></p>
          </div>
          <div class="panel-body">
            <h2> Просмотры: {{ article.view }} </h2>
               <a href="{% url 'article_detail' article.pk %}"> <h2> {{article.title}} </h2> </a>
          <h3 align="right">{{article.date|date:"d-m-Y"}}</h3>
          </div>
        </div>
    {% endfor %}
</div>