Html 如何按视口大小将引导行转换为列

我在

lg

和

sm

上有这样一个布局：

我希望

lg

上的行和

sm

上的列是相同的div。有没有一种方法可以在没有完全不同的div的情况下做到这一点？我提出的解决方案是：

.box-a.row.visible-lg.hidden-sm
.box-b.row.visible-lg.hidden-sm
.box-c.row.visible-lg.hidden-sm

.box-a.col-sm-4.visible-sm.hidden-lg
.box-b.col-sm-4.visible-sm.hidden-lg
.box-c.col-sm-4.visible-sm.hidden-lg

---

但正如我所说，这涉及到冗余代码。有没有一种更干净的方法可以做到这一点？

最简单的方法是在小列达到某个断点时使用媒体查询使其全宽。如果向每列添加名为full width的类，然后向css添加媒体查询，例如：

@media (min-width:720px) {
    .full-width {
        width:100%;
        left:0;
    }
}

---

。。。那么这将实现你想要的。只需根据屏幕大小修改

minwidth

断点，您希望这些列在屏幕上变为全宽

所有前端框架（如Bootstrap）都使用网格系统来显示和定位内容。网格列的工作（使用）方式是，在大屏幕上，您在一行中显示两列，但随着屏幕缩小（表格或移动设备），您在一行中显示的列更少（或只有一列）。你问的恰恰相反

---

如果您仍然必须使用相反的方法，我建议您向col添加一个自定义类（因为使用默认的col-x-x不是一件好事，它可能会影响布局的其余部分），并使用@media查询添加一些样式，以约束各种设备屏幕的列宽度。

您可以将所有列放入

行中
，并且，由于引导网格是可组合的，因此每列可以同时具有
col-sm-4
和
col-lg-12
类

网格结构为：

名称空间：
col
屏幕尺寸：
xs | sm | md | lg
colSpan:
1-12
因此，您可以将它们混合在一起：


当屏幕为
LG
（向上）时，colspan为
12
：
col-LG-12
当屏幕为
SM
（向上）时，colspan为
4
：
col-SM-4


@import”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
.盒子{
高度：50px；
背景：轻珊瑚；
边框：1px纯绿色；
保证金：5px0；
}

你为什么要走相反的路。正常情况下，我是一个白痴，所以我会在较小的设备上把col排成一行。谢谢你指出这一点。你能补充一下吗？当然，我解释得更透彻了。希望它能帮上忙这是完全不需要的。