仅在移动设备上引导响应行为

Question

我试图让我的引导模板仅在移动设备上调整大小，并且通常在一定宽度后具有响应行为。例如，如果在一台 15 英寸的笔记本电脑上，我将浏览器的大小调整为只有一半，它只会在页面上添加一个水平滚动条。

我尝试过使用 container-sm 和 container-md，但是当我调整浏览器大小时它仍然会缩小，我该如何改变这种行为。我的模板是这样的：

    <div class="wrapper">
        <div class="container-fluid pl-4 pr-5 pt-4">
            <div class="row">
                <div class="col-sm-3">
                  <!-- content -->    
                </div>
                <div class="col-sm-6 order-2">
                  <!-- content -->
                </div>
                <div class="col-sm-3 order-sm-2 order-sm-2">
                  <!-- content -->
                <div id="#footerPlaceholder"></div>
                </div>       
            </div>
        </div>
    </div>

有什么方法可以设置列在一定大小后重新收缩？

编辑：我希望“HTML”标签中的所有元素仅在例如屏幕 之后调整大小

Answer 1

您应该在 col-sm-3 之前添加 col 来解决此问题。像这样：

编辑代码： 如果我猜对了，您应该在断点设备（例如小屏幕）之前为所有其他设备添加“col-4”（例如）大小。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        
<div class="wrapper">
    <div class="container-fluid pl-4 pr-5 pt-4">
        <div class="row bg-info">
            <div class="col col-4 col-sm-12 bg-info">
              Test  
            </div>
            <div class="col col-4 col-sm-12 order-2 bg-danger">
              Test
            </div>
            <div class="col col-4 col-sm-12 order-sm-2 order-sm-2 bg-success">
              Test
            <div id="#footerPlaceholder"></div>
            </div>       
        </div>
    </div>
</div>