Почему столбцы строк переполняются на больших экранах?

Question

Мой первый ряд ведет себя именно так, как я хочу, на маленьком и большом экране.Тем не менее, мой второй ряд работает на экранах меньшего размера, но столбцы располагаются друг на друге с правой стороны на экранах большего размера, хотя кажется, что места достаточно.Я хочу, чтобы четыре столбца соединились.

Я попытался поиграть с левым и правым полями и отступами, но это не помогло.

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

Глядя на другое объяснение, я подумал, не была ли это проблема высоты столбцов, как я заметилчто проблемные столбцы не совсем одинаковой высоты.Я пробовал это:

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}

.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}  

и это:

 .col-sm-3 {
  display: inline-block;
  float: none;
}

Но это не изменило высоту или проблему с выравниванием.

<div class="row">
    <div class="col-sm-6 order-fisrt col-md-6">
      <div class="vl">
      <a href="{% url 'detail' article.id %}">
      <div class="text-center">
        <img src="{{ article.pic.url }}" class="img-fluid">
      </div>
      <h1 class="title">{{ article.headline }}</h1></a>
        <p>{{ article.pub_date|date:"F j, Y" }}</p>
        <p class="article">{{ article.content|truncatewords:"35" }}</p>
        </div>
        <hr class="firstline" />
      </div>
      <div class="col-sm-3"></div>
    {% elif article.rank == 2 %}
    <div class="col-sm-3 order-md-first">
      <a href="{% url 'detail' article.id %}">
      <div class="text-center">
        <img src="{{ article.pic.url }}" class="img-second">
      </div>
      <h2 class="title-two">{{ article.headline }}</h2></a>
        <p>{{ article.pub_date|date:"F j, Y" }}</p>
        <p class="article">{{ article.content|truncatewords:"20" }}</p>
        <hr />
        </div>
        </div>
        {% else %}
      <div class="row">
        <div class="col-sm-3">
          <a href="{% url 'detail' article.id %}">
          <div class="text-center">
            <img src="{{ article.pic.url }}" class="img-second">
          </div>
          <h2 class="title-two">{{ article.headline }}</h2></a>
            <p>{{ article.pub_date|date:"F j, Y" }}</p>
            <p class="article">{{ article.content|truncatewords:"20" }}</p>
            <hr />
            </div>
          </div>