如何使引导网格中的 4 列分解为两列然后一列

Question

这是到目前为止我的引导代码：

<div class="container-flex">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
</div>

简单的 4 列设置。目前，它在大（lg 类）断点上分成单列。有什么方法可以设置它，以便它在大断点上分成两列，然后在中等（md类）断点上分成一列？我一直在查看引导教程，但找不到任何解决方案。

这是我的 jsfiddle： https: //jsfiddle.net/noe562h0/

Answer 1

尝试这个

<div class="container-flex">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-3">1</div>
        <div class="col-12 col-md-6 col-lg-3">2</div>
        <div class="col-12 col-md-6 col-lg-3">3</div>
        <div class="col-12 col-md-6 col-lg-3">4</div>
    </div>
</div>

以下是 Bootstrap 4 网格参考Bootstrap和w3schools.com文档。