Bootstrap 4 Bootstrap4堆叠卡

刚开始使用bootstrap，我正在尝试学习如何堆叠卡片。我有以下代码：

<div id="home">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 1</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 2</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 3</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 4</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>                      
        </div>
    </div>
</div>

卡1
Lorem ipsum door sit amet，他在ea中获得了最高智能，但他拥有ei。最低生产量，每一个工作地点的最高生产量，不完全。在奥古斯都-保罗-康斯托，这是一个主要的概念。所有人都持不同意见，但我的意见是正确的。最低限度的相似性，这是一种相似的质量
阅读更多。。。
卡2
Lorem ipsum door sit amet，他在ea中获得了最高智能，但他拥有ei。最低生产量，每一个工作地点的最高生产量，不完全。在奥古斯都-保罗-康斯托，这是一个主要的概念。所有人都持不同意见，但我的意见是正确的。最低限度的相似性，这是一种相似的质量
阅读更多。。。
卡片3
Lorem ipsum door sit amet，他在ea中获得了最高智能，但他拥有ei。最低生产量，每一个工作地点的最高生产量，不完全。在奥古斯都-保罗-康斯托，这是一个主要的概念。所有人都持不同意见，但我的意见是正确的。最低限度的相似性，这是一种相似的质量
阅读更多。。。
卡4
Lorem ipsum door sit amet，他在ea中获得了最高智能，但他拥有ei。最低生产量，每一个工作地点的最高生产量，不完全。在奥古斯都-保罗-康斯托，这是一个主要的概念。所有人都持不同意见，但我的意见是正确的。最低限度的相似性，这是一种相似的质量
阅读更多。。。

它在一行生成3张卡，在第二行生成一张卡。 我希望在一行（lg）上建立4张卡，在一行上建立2张卡，在第二行（md）上建立2张卡，最后将单个卡堆叠在彼此的顶部（sm）

---

当我调整浏览器的大小时，我注意到这些卡片也会调整大小，我需要这些卡片保持相同的大小，并随着屏幕的大小相应地堆叠。需要一些帮助，请。

您可以对每一列使用以下内容：

<div class="col-md-6 col-lg-3">
      <div class="card">
           ..
      </div>
</div>

---

这是完美的；但是，将平板电脑置于横向模式会改变卡片的大小（使其变高变瘦），并将它们全部放在一行。平板电脑的纵向宽度为1024px。它回答了您的问题：“一行4张卡（lg），一行2张卡，第二行2张卡（md），最后一张卡叠在一起（sm）”md断点为992px，因此“一行4张卡（lg）”在992px之前不会堆叠到两行。。这就是Bootstrap的工作原理。谢谢，Zim…还在学习所有的专栏类，等等。我想是的。很抱歉。再次感谢你的帮助。齐姆，你帮了大忙。我可以和你联系一下吗？我肯定你会有答案的？

<div class="col-md-6 col-lg"></div>