我想重新排序网页桌面版的引导程序列。
请参见下图。
列没有固定的高度。
由于内容较大，列B高于台式机版本的A和C。
基本上，我想“合并”桌面版本上的列A和C。
我想避免使用重复的HTML（显示/隐藏）或jQuery根据浏览器大小“剪切和粘贴”元素。
有什么想法如何用CSS做到这一点吗？
谢谢！
手机版：
<div class="column-A col-xs-12">
...
</div>
<div class="column-B col-xs-12">
...
</div>
<div class="column-C col-xs-12">
...
</div>
桌面版：
最佳答案
好问题。这可以通过在引导程序中使用Pull和Push类来实现。 Bootstrap调用是列排序。 （http://getbootstrap.com/css/#grid-column-ordering）
因此，基本的原则是，首先按照您希望其在手机上显示的方式对HTML进行排序，然后在桌面上将第一个元素向右推，同时将第二个元素向左推。这将为您提供所需的输出。
以下是您的编码方式：
<div class="row">
<div class="col-xs-12 col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-xs-12 col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
尝试一下，如果您遇到任何问题，请将其张贴在评论中，我会看一下。