HTML&；CSS：引导列

我试图创建一个网格系统，但我不知道如何放置列。更清楚地说，我希望水平卡片是一张接一张，而不被分割。我试着改变积木的顺序，但似乎根本不起作用。我用的是bootstrap4

<div class="row">
        <div class="col-lg-8 col-md-12">
          <div class="card">
            <div class="card-header card-header-text card-header-warning">
              <div class="card-text">
                Welcome back, <b><?php echo $display_name; ?></b>!
              </div>
            </div>
            <div class="card-body">
            <h4 class="card-title">Info</h4>
              <p class="card-text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio dui, sodales vitae fringilla quis, porta in nunc..
              </p>
              <footer class="blockquote-footer">Lorem</footer>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
              <div class="card-header card-header-text card-header-danger">
                <div class="card-text">
                  <h4 class="card-title">News</h4>
                </div>
              </div> 
            <?php
            while($row = $stmtNews->fetch(PDO::FETCH_ASSOC)){
              $row['date'] = date('j M', strtotime($row['date']));
            ?>
            <div class="card-body" style="max-height: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                <?php echo $row['news']; ?>
                <div class="card-footer">
                  <div class="card-text">
                    <small class="text-time"><?php echo $row['date']; ?></em></small>
                  </div>
                </div>
            </div>
            <div class="dropdown-divider" style="margin: 15px;"></div>
            <?php
            }
            ?>
          </div>
        </div>
        <div class="col-lg-8 col-md-12">
          <div class="card">
            <div class="card-header card-header-text card-header-warning">
              <div class="card-text">
                Welcome back, <b><?php echo $display_name; ?></b>!
              </div>
            </div>
            <div class="card-body">
            <h4 class="card-title">Info</h4>
              <p class="card-text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio dui, sodales vitae fringilla quis, porta in nunc...
              </p>
              <footer class="blockquote-footer">Lorem</footer>
            </div>
          </div>
        </div>
      </div>

欢迎回来！
信息

Lorem ipsum dolor sit amet，是一位杰出的献身者。酒后驾车、弗林西利亚之家、努克港。。

洛勒姆
新闻
欢迎回来！
信息

Lorem ipsum dolor sit amet，是一位杰出的献身者。酒后驾车、弗林利亚之家、努克之门。。。

洛勒姆

---

我不知道您到底想要实现什么，但也许这种方法可以帮助您：

      <div class="row">
        <div class="col-sm-9">
          Level 1: .col-sm-9
          <div class="row">
            <div class="col-sm-12">
              Level 2: .col-12
            </div>
            <div class="col-sm-12">
              Level 2: .col-12
            </div>
          </div>
        </div>
        <div class="col-sm-2">
          Level 1: .col-sm-2
          <div class="row">
            <div class="col-sm-12">
              Level 2: .col-12 with defined or dynamic height
            </div>
          </div>
        </div>
      </div>

级别1:.col-sm-9
第2级：.col-12
第2级：.col-12
级别1:.col-sm-2
级别2:.具有定义高度或动态高度的col-12

它将生成以下网格：

---

这可能不是最好的主意，但它可能是解决问题的第一种方法。

你想实现什么？如何更改订单？你能发布一个工作片段来重现这个问题吗？截图正好显示了你写的内容。您将所有内容放在一个类名为“row”的div中，指定为8和4的列就在那里。第三列在定义为col-md-4的列之后呈现。首先，将所需的行和希望这些行包含的列分开。例如：要使所有元素彼此重叠，只需将它们全部放在一行内，并给它们col-lg-12以占据容器的整个宽度。我们需要更多关于你想要实现什么的细节。@Zim我想要完成的是，我想要删除两张带有黄色标题的牌之间的空格。我希望他们离我很近。我将尝试立即添加一个片段，您的方法实际上是关键。结果如我所愿。非常感谢。