当使用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个元素可放入数位板的页面。
例如，假设我们要显示投资组合的一些项目卡片：
在特定设备上查看页面时，同时使用全部可用于激活元素上的不同CSS属性。<div > <div > <img src="img.jpg"> <div > <h5>Project 1</h5> <div > <label>Tech Stack</label> <h6>HTML5, CSS, JS</h6> </div> </div> </div> </div>
换句话说，如果用户在桌面上打开网站，则
col-lg-3意味着将总共显示4张卡片，当
col-md-4 means总共3张卡片时，
col-sm-6总共显示2张卡片，然后
col-xs-12在移动设备上仅显示1张卡片的宽度为100％页面的
