重序引导列

Question

我想重新订购我的网页的桌面版本的引导列。

请看下面的图片。

这些柱子没有固定的高度。

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

谢谢你的意见！我找到了一个90%满意的解决方案。

如果A列的内容高于B栏，则仍有一个问题。在这种情况下，C栏不能向右拉，因为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>