重新排序引导列答案

【问题标题】：Re-order bootstrap columns重新排序引导列
【发布时间】：2017-06-09 21:08:33
【问题描述】：

我想为我的网页桌面版重新排序引导列。

请看下图。

列没有固定的高度。

由于内容较大，桌面版的 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>

桌面版：

【问题讨论】：

您不能仅通过媒体查询来修改标记的结构，但您可以影响它们的呈现方式。 Flexbox 是目前无需修改标记即可直观地重新排列事物的最佳方式。
你考虑过使用 jQuery 吗？
你试过Bootstrap Push And Pull类吗？？
谢谢。我还没有设法找到解决方案。我更新了我的问题以更好地说明我在寻找什么。希望有一个列排序的解决方案。谢谢！

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

好问题。这可以通过在引导程序中使用 Pull 和 Push 类来实现。引导调用是列排序。 (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>

尝试一下，如果您遇到任何问题，请将其发布在 cmets 中，我会看看它。

【讨论】：

谢谢。我还没有设法找到解决方案。我更新了我的问题以更好地说明我在寻找什么。希望有一个列排序的解决方案。谢谢！

【解决方案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>

【讨论】：