为什么行列在较大的屏幕上溢出？

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>