重新订购引导列

Question

我想为我的网页桌面版重新订购bootstrap列。

请参阅下面的图片。

列没有固定的高度。

由于内容较大，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>

桌面版：

Answer 1

好问题。这可以通过在bootstrap中使用Pull和Push类来实现。 Bootstrap调用是Column Ordering。 （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>

尝试一下，如果您遇到任何问题，请在评论中发布，我会看一下。

Answer 2

感谢您的投入！我找到了满意度达到90％的解决方案。

如果A列的内容高于B列，则仍然存在问题。在这种情况下，C列无法向右拉，因为它卡在A列上。

关于如何解决这个问题的任何想法？感谢。

CSS

@media (min-width: 992px) {
  .pull-md-left {
    float: left;
  }

  .pull-md-right {
    float: right;
  }
}

HTML：

<div class="column-A col-sm-12 col-md-4 pull-md-right">
    ...
</div>

<div class="column-B col-sm-12 col-md-8 pull-md-left">
    ...
</div>

<div class="column-C col-sm-12 col-md-4 pull-md-right">
    ...
</div>