twitter-bootstrap - Bootstrap 4 列排序难题

Question

<分区>

Answer 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>