HTML/CSS/Javascript：我如何做到这一点。col-sm可以取代@media-query

我这里有这样的代码，它可以并排（从左到右）显示每个图像，但我想让它在移动版本（最大宽度：480px）中以2列（2行）的形式显示图片。我不想使用@media query，而是想知道如何通过.col-sm实现它？ 我有图片，我想将格式更改为移动显示时的格式：

图片图片

<div class="col-9">
                <div class="card-group">
                    <div class="card">
                        <img class="card-img-top" src="carrots.jpg" alt="Card image cap">
                        </div>
                        <div class="card">
                            <img class="card-img-top" src="beets.jpg" alt="Card image cap">
                            </div>
                            <div class="card">
                                <img class="card-img-top" src="asparagus.jpg" alt="Card image cap">
                                </div>
                            </div>

图片

<div class="col-9">
                <div class="card-group">
                    <div class="card">
                        <img class="card-img-top" src="carrots.jpg" alt="Card image cap">
                        </div>
                        <div class="card">
                            <img class="card-img-top" src="beets.jpg" alt="Card image cap">
                            </div>
                            <div class="card">
                                <img class="card-img-top" src="asparagus.jpg" alt="Card image cap">
                                </div>
                            </div>

---

如果问题很模糊，我道歉。我还是个新手，正在学习bootstrap

你需要给你的容器元素一类

容器流体

，然后给它的子元素一类

col xs-

。 例如：

<div class="container-fluid">
  <div class="col-md-4 col-xs-6">
    <img>
  </div>
  <div class="col-md-4 col-xs-6">
    <img>
  </div>
  <div class="col-md-4 col-xs-6">
    <img>
  </div>
</div>

container fluid

类将使您的页面具有响应性。当视口为992px或更宽时，

col-md-4

将12列布局拆分为三个大小相等的部分。

col-xs-6

将布局分成两部分

---

你可以阅读更多关于它的信息

你的html和你的CSS一起决定了一些东西是如何显示的。当屏幕变得太小的时候，有很多方法来包装一些东西，而且在开始编码之前，你可能需要考虑很多参数（定心，垂直间隔，……）。因此，我首先要做一件简单的事情，添加html和css，然后非常详细地描述宽度缩小时需要做什么。我想从现在的图片并排到缩小到移动视图，对此：-我认为你不想让类名上的句号一定是打字错误。我明白了。谢谢我很感激