如何使用全宽列更改引导网格顺序

时间:2016-01-29 16:19:29

标签: twitter-bootstrap

我正在尝试根据屏幕大小改变引导程序中列的顺序,但是使用一些全宽列。没有全宽列,使用推拉助手类很简单。我想也许需要筑巢,但我一直在盯着它看,它不是来找我的!

我想要的是什么:

MD-LG:

[A][B][D]
[===C===]

-

SM:

[A] [B]
[==C==]
[==D==]

-

XS:

[A]
[B]
[C]
[D]

这是我目前所做的jsbin沙箱: http://jsbin.com/suqefecifi/edit?html,css,output

我希望我可以推送或拉动并交换行,但似乎这些辅助类只是为了改变单行内的列顺序。

我认为制定这样的计划的最佳策略是开始使用您的XS订单...这是HTML需要的顺序。从那里,使用帮助程序类来处理更大的大小。或者有更好的方法来解决这个问题吗?我正在寻找一种更好的方法,而不是“盯着它,希望顿悟!”

1 个答案:

答案 0 :(得分:0)

您可以使用.visible-和.hidden-帮助程序类实现此目的,这些类旨在用于切换内容acrosss视口断点",请参阅http://getbootstrap.com/css/#responsive-utilities-classes

您可以添加其他专栏 - 让我们称之为“E' E' - 并将其设置为在md和lg大小上可见,否则隐藏。 D将被设置为在这些尺寸下不可见,否则可见。

HTML中的列顺序为ABECD,列类设置正确。目标是,在您的第一个示例(MD-LG)中,客户端会看到:

[A][B][E]
[===C===]