如何在不同屏幕上更改Bootstrap 3 div列顺序

Question

我正在做我的第一个响应式设计。是否可以在bootstrap 3中执行此操作而不使用hidden-＃。

在lg和md上的

布局：

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

sm上的

布局：

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

xs上的

布局：

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

Answer 1

Bootstrap的推送无法解决问题 - Bootstrap确实有一些限制，这是我不时遇到的问题。确实唯一可靠的解决方法是使用其他屏幕尺寸的重复版本的hidden-xs。

我的解决方法是使用Foundation Zurb，因为它的源代码插件更适合处理这类事情！您还可以使用数据交换专门为某些屏幕尺寸加载内容，完全绕过hidden-xs修复：）

Answer 2

您可以更改不同屏幕的色块大小。

<div class="col-lg-6 col-md-6 col-xs-12">[A]</div>
<div class="col-lg-6 col-md-6 col-xs-12">[D]</div>
<div class="col-lg-6 col-md-6 col-xs-12">[B]</div>
<div class="col-lg-6 col-md-6 col-xs-12">[C]</div>