Gridview 网格系统在响应式设计中的应用难点

我正在使用gridview创建一个响应页面。 我有一行包含3列：

 <div class="row">        
    <div class="col-12" >
      <div class="row">
        <div class="col-3">
            <img src="..." alt="">
          </div>              
          <div class="col-9">
            <h3>Headline 1</h3>
            <p>"Lorem ipsum dolor sit amet, ... </p>
          </div>
      </div>
    </div>

    <div class="col-12" >
      <div class="row">
        <div class="col-3">
            <img src="..." alt="">
          </div>              
          <div class="col-9">
            <h3>Headline 2</h3>
            <p>"Lorem ipsum dolor sit amet, ... </p>
          </div>
      </div>
    </div>   

      <div class="col-12" >
        <div class="row">
          <div class="col-3">
              <img src="..." alt="">
            </div>              
            <div class="col-9">
              <h3>Headline 3</h3>
              <p>"Lorem ipsum dolor sit amet, ... </p>
            </div>
        </div>
      </div>
  </div>

每列包含一行，该行本身由两列组成：一列用于图像，另一列用于标题和文本。每行中的列数相加为12。但是，标题和内容显示在图像下方，而不是旁边。

---

您能找出问题吗？

您可以先检查第3列或第9列中是否有填充、边距或硬编码宽度的元素迫使这些列中的任何一列超出预期宽度

如果是这样的话，就不会有足够的空间让两列并排显示，最终结果是第9列将下拉到第3列下

如果这不能帮助您识别问题，作为一个快速测试，将col-9改为col-6，看看会发生什么。如果仍然没有乐趣，发布一个链接到页面，或者用html和css启动一个代码笔来说明问题

---

祝你好运

我意识到我错过了以下CSS

.row::after {
  content: "";
  clear: both;
  display: block;
  }

这就是为什么这场争吵看起来很奇怪