Bootstrap 4响应式重新排序填充空间

Question

我试图在Bootstrap 4中获得某种响应行为，我希望有一列能够占据正确的部分，而另外两个cols会在更大的屏幕上堆叠，但是在较小的屏幕上它需要在这两个部分之间。

我已经尝试了以下2个html布局，但是蓝色div将绿色按钮推向页面，如示例1中所示，或者蓝色和绿色内嵌红色，如示例2所示。

Bootply of both examples

示例1

<div class="row">
  <div class="col-12 col-md-7">RED</div>
  <div class="col-12 col-md-5">BLUE</div>
  <div class="col-12 col-md-7">GREEN</div>
</div>

示例2

<div class="row">
  <div class="col-12 order-1 col-md-7">RED</div>
  <div class="col-12 order-3 order-md-2 col-md-7">GREEN</div>
  <div class="col-12 order-2 order-md-3 col-md-5">BLUE</div>
</div>

所需的桌面布局

所需的移动布局

Answer 1

你想要这样的东西吗？我尝试过使用Bootstrap 4脚本，它运行正常！

@media screen and (max-width:768px){
  .red{
    order:1;
  }
  .blue{
    order:3;
  }
  .green{
    order:2
  }
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="row">
  <div class="col-12 col-md-7 red">RED</div>
  <div class="col-12 col-md-5 blue">BLUE</div>
  <div class="col-12 col-md-7 green">GREEN</div>
</div>