Bootstrap 4列排序难题

Question

我相信Bootstrap 3可以实现这一点，但我不确定如何使用Bootstrap 4（4.1）实现以下功能。

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

谢谢！

Answer 1

我不认为当屏幕尺寸缩小时，在'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>