css - 重新调整大小时 Bootstrap 重新排序列

标签 css twitter-bootstrap

我的大多数编码问题通常都可以通过在此处搜索轻松解决(因此这是我的第一篇文章),但对于这个问题我找不到答案。

我使用 w3 教程制作了一个简单的 Bootstrap 网格。

我有 A、B、C 列。A 列只有 1 个元素(谷歌地图),B 列和 C 列各有 4 行(我们称它们为 B1-B4 和 C1-C4):

What I have made (large screen)

当我调整浏览器窗口大小时使其变成移动屏幕大小时,它只显示 1 列,顺序为 A、B1-B4、C1-C4。

What I get when I re-size

我想要的是将列重新排序为 A、B1、C1、B2、C2、...、B4、C4

What I want when I re-size

如果有人有解决方案,或者可以指出正确的方向,我将不胜感激。

提前致谢。

最佳答案

如果不使用最少的 Javascript,则无法在纯 Bootstrap 3 中对列进行重新排序。

一种解决方法是使用 hidden-sm 以包含两倍数据为代价隐藏列, hidden-md , hidden-lghidden-xs根据设备隐藏列的类 as explained here .

关于css - 重新调整大小时 Bootstrap 重新排序列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47370816/

相关文章:

CSS:在视觉上增加 &nbsp 的空间或宽度?

css - 与 Chrome 中的预期结果相比,Firefox 中的奇怪 CSS 结果(一些 div 未对齐但向下移动)

html - Twitter Bootstrap - 让行占据剩余高度

html - Internet Explorer 浏览器问题 Bootstrap

html - 在所有屏幕尺寸上保留导航元素

html - 遮盖一个物体,使它看起来好像在它旋转的物体后面

android - 主页包装应居中但在平板电脑上显示为左侧

javascript - 如何使箭头键和空格键不强制我的网页下降?

javascript - 如何使 JavaScript 在第二次访问页面时激活?

html - Twitter bootstrap 风格继承与 jinja2