Html 同时使用“col”和“col-3”类

我使用类col创建7个相等的列，当响应时，我希望有两行。一个有4列，另一个有3列。 这是我的密码

<div class="row mt-20">
        <div class="col col-3">
            <img src="assets/img/cegh.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/usp.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/butanta.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/fapesp.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/inct.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/analitica.png" width="80%">
        </div>
        <div class="col col-3 mb-5">
            <img src="assets/img/abcam.png" width="80%">
        </div>
    </div>

---

但是当我这样做的时候，即使没有响应，我也得到了两行，而不是我想要的7行。

如果我理解正确，您希望元素的大小为3列，即当屏幕大小为XS时，每行4列，当屏幕的大小大于或等于某个断点时，具有相同宽度的列。在本例中，我将使用SM。这可以通过类col-3 col-{breakpoint}的结合来实现，如下一个示例所示，breakpoint=SM margin top的添加仅用于美观：

---

col用于所有屏幕，col sm-*用于小屏幕等，有关更多信息，请访问您是否可以描述您的预期输出使用桌面应在一行中显示7列，使用手机应显示2行，这是完美的！非常感谢。