当使用Bootstrap时，这些是为一列网格添加的类，它们对应于超小型，小型，中型和大型设备。

.col-xs = *其他小型设备（例如电话）（<768px）

.col-sm =小型设备（例如平板电脑）（≥768px）

.col-md =中型设备（例如笔记本电脑或小型台式机）（≥992px）

.col-lg =大型设备（即台式机）（≥1200px）*

这样，通过媒体查询，您可以允许浏览器仅解释正确的类。例如，如果您从平板电脑上浏览该网站，您将看到实际上在浏览器中应用的css属性仅是 .col-sm
类的属性。

更新

同样重要的是要提到这些类在总共12列的网格上使用，这是Bootstrap使用的网格系统设置。

因此，当您.col-sm-4在元素上使用时，这意味着该元素将在总宽度的12中占用4列。从逻辑上讲，如果.col- sm-4使用，则每行仅3个元素可放入数位板的页面。

例如，假设我们要显示投资组合的一些项目卡片：

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
    <div class="card-wrapper">  
        <img src="img.jpg">
        <div class="overlay-text">
            <h5>Project 1</h5>
            <div class="labels">
                <label>Tech Stack</label>
                <h6>HTML5, CSS, JS</h6>
            </div>       
        </div>          
    </div> 
</div>

class="col-xs-12 col-sm-6 col-md-4 col- lg-3"在特定设备上查看页面时，同时使用全部可用于激活元素上的不同CSS属性。

换句话说，如果用户在桌面上打开网站，则col-lg-3意味着将总共显示4张卡片，当col-md-4 means总共3张卡片时，col- sm-6总共显示2张卡片，然后col-xs-12在移动设备上仅显示1张卡片的宽度为100％页面的