Bootstrap 4列排序难题[重复]答案

【问题标题】：Bootstrap 4 Column Ordering Conundrum [duplicate]Bootstrap 4列排序难题[重复]
【发布时间】：2018-10-02 21:34:45
【问题描述】：

我相信这可以通过 Bootstrap 3 实现，但不确定如何使用 Bootstrap 4 (4.1) 实现以下功能。

我想在 A 下方有一列 C 和另一列 B，但在移动设备上显示 ABC。请参阅下面的示例图片。

谢谢！

【问题讨论】：

请在问题中发布代码。如重复答案中所述，您需要响应式禁用弹性框并浮动列。 codeply.com/go/RYDUXOFUgY

标签： twitter-bootstrap css flexbox bootstrap-4

【解决方案1】：

我认为 Bootstrap 开箱即用不支持在屏幕尺寸缩小时在“A”和“C”之间插入“B”的能力。

但是，它可以很好地与一些自定义 CSS 配合使用。此解决方案要求容器（即行）具有定义的高度。

.pull-up {
  top: -50%;
}

.split-row-1 {
  height: 100%;
}

.split-row-2 {
  height: 50%;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" style="height:50px;">
  <div class="col-12 col-md-4 split-row-2" style="background:red">A</div>
  <div class="col-12 col-md-8 split-row-1" style="background:blue">B</div>
  <div class="col-12 col-md-4 split-row-2 pull-up" style="background:yellow">C</div>
</div>

【讨论】：

该示例折叠到正确的布局，但在桌面上，我希望 C 列位于示例中 B 列的位置。无法弄清楚如何做到这一点。感谢您的帮助！
哎呀，你是对的。还在努力……
我更新了我的答案。这能满足你的需要吗？
太棒了——非常感谢！
@eclecticist Bootstrap 4 中没有 col-xs。只有 col。此外，您应该只包含其中一个 Bootstrap JS 文件。所以要么bundle要么普通的。