Bootstrap 3.x 类似于 Bootstrap 2.3 中的网格列排序答案

【问题标题】：Bootstrap 3.x like Grid Column Ordering in Bootstrap 2.3Bootstrap 3.x 类似于 Bootstrap 2.3 中的网格列排序
【发布时间】：2014-01-10 05:45:50
【问题描述】：

现在我知道 Bootstrap 3.x 已经发布，我应该转向 3.x。但是，这是在使用 Bootstrap 2.3.1 的现有站点中提出的更改请求。

这就是我想要实现的目标：

我在 12 列引导网格中使用 3 列布局：

<div class='row'>
  <div class='span3'></div>
  <div class='span6'></div>
  <div class='span3'></div>
</div>

所需的响应行为是：

大屏幕：

[ X ][ Y Y ][ Z ]

平板电脑肖像：

[ Y    Y ]
[ X ][ Z ]

小屏幕：

[YY]
[X]
[Z]

现在，我知道这可以使用grid column ordering of Bootstrap 3.x 来实现。但是，我需要使用 Bootstrap 2.3 来实现。

Fiddle for those willing to give this a try!

【问题讨论】：

@downvoter 否决投票的任何具体原因？
据我所知，通过 bs 2.x.x 是不可能实现的。你必须迁移到 bs 3.x.x
@Ravimalya 请再次阅读问题。将整个站点迁移到 Bootstrap 3.x 以在一个地方进行此布局更改不是一种选择。另外，我意识到这个问题没有直接的解决方案。但是，这并不是不能实现的。我最后的手段是使用基于脚本的解决方案，为我重新排序 DOM 元素以实现所需的布局。
@Ravimalya 好主意会试一试。谢谢

标签： html css twitter-bootstrap

【解决方案1】：

在 Bootstrap 2.x.x 中，该行的左边距为负，span-x 的左边距为 gutter。如果第二个跨度堆叠到下一行，它肯定会有左边距。

我的建议是仅从http://getbootstrap.com/customize/ 下载网格并附加到现有的引导 css 或自定义 css。使用新的网格系统得到你想要的。

【讨论】：

【解决方案2】：

在不改变 bootstrap 2.3 css 的情况下实现此目的的一种方法是

<div class='row'> 
    <div class='span6 hidden-desktop visible-tablet visible-phone'>YY</div>
    <div class='span3'>X</div>
    <div class='span6 visible-desktop hidden-tablet hidden-phone'>YY</div>
    <div class='span3'>Z</div>
</div>

请看http://jsfiddle.net/houssamk/3f969/2/

【讨论】：

这与我最终所做的非常接近。尽管您的小提琴没有显示 [X] 和 [Z] 将在旁边显示的中间平板布局，但这是一个很好的起点。唯一的缺点是两次加载 [YY] 和管理由于 [YY] 屏幕中包含的元素的 id 重复而可能出现的冲突的渲染开销。