layui栅格默认移动端优先，小屏自动垂直堆叠、中大屏水平排列；需正确使用layui-col-xs-、sm-、md-、lg-等响应式类名，避免覆盖默认行为。
Layui 的栅格系统默认是“移动端优先”，列在小屏幕（如手机）下自动垂直堆叠（即单列显示），在中大屏幕下才按设定的列数水平排列。所以你不需要额外操作——它本来就是这么工作的。关键在于正确使用响应式类名，避免误用或覆盖默认行为。
确认你用了正确的栅格类名
Layui 栅格通过 layui-col-xs-、layui-col-sm-、layui-col-md-、layui-col-lg- 等类控制不同断点下的列宽。其中：
-
layui-col-xs-*：超小屏（这是移动端垂直变水平的关键起点 -
layui-col-sm-*：≥672px（平板横屏起）开始水平分栏 - 不写
xs类时，小屏下会默认占满一行（即垂直堆叠）；写了xs类，小屏也能水平排（需谨慎，可能挤坏布局）
典型写法：让列在手机上垂直、在平板+水平
这是最常用场景，代码示例如下：
<div class="layui-row"> <div class="layui-col-md6">左边内容</div> <div class="layui-col-md6">右边内容</div> </div>
说明：
- 没写
xs或sm，只用md6→ 小屏下自动垂直堆叠（100%宽度各占一行） - ≥768px（
md断点）时，两列等宽水平并排 - 这就是“移动端垂直 → 中屏以上水平”的标准实现
如果想在手机上也水平排（比如双列图标），要显式加 xs
例如希望手机竖屏下也左右两列：
<div class="layui-row"> <div class="layui-col-xs6 layui-col-md6">左</div> <div class="layui-col-xs6 layui-col-md6">右</div> </div>
注意：
-
layui-col-xs6表示在手机屏也强制半宽，但务必确保内容足够简洁，否则文字换行或溢出 - 建议搭配
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;控制文本 - 慎用
xs布局，多数业务场景应优先保障手机阅读体验（垂直更安全）
检查是否被 CSS 强制覆盖了 display
如果你发现小屏下没垂直堆叠，可能是以下原因：
- 自定义 CSS 写了
.layui-col-* { display: inline-block !important; }—— 删除或改用响应式写法 - 外层容器设了
white-space: nowrap或flex布局干扰了栅格的 block 流 - 忘了给行容器加
layui-row（必须有，它带font-size: 0清除间隙，并触发 BFC）
