使用 bootstrap 4 对 3 列进行排序和堆叠

I have this structure in bootstrap columns:

And I want you to change to a lower resolution, be ordered as follows:

我在这里找到了如何使用 Flexbox 做到这一点：Flexbox：重新排序和堆叠列 https://stackoverflow.com/questions/39635535/flexbox-reorder-and-stack-columns

但我无法将项目的整个结构更改为 flexbox，所以我想知道使用 bootstrap 4 是否可以这样做。

非常感谢。

我糟糕的测试。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

div {
  text-align: center;
  height: 60px;
}

#left {
  background: yellow;
}

#middle {
  background: blue;
}

#right {
  background: coral;
}

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-md-3">
      <div id="left">COLUMN 1</div>
    </div>
    <div class="col-sm-6 col-md-6">
      <div id="middle">COLUMN 2</div>
    </div>
    <div class="col-sm-3 col-md-3">
      <div id="right">COLUMN 3</div>
    </div>
  </div>
</div>

您可以使用 Bootstrap 4 (alpha 6) 实用程序类来避免额外的 CSS。在移动设备上，1-2-3 变为 3-2-1。

<div class="container">
    <div class="row">
        <div class="col-sm-8 col-md-6 push-md-3">
          <div id="middle">COLUMN 2</div>
        </div>
        <div class="col-sm-4 col-md-6">
          <div class="row">
            <div class="col-md-6 pull-md-12 flex-last flex-md-unordered">
             <div id="left">COLUMN 1</div>
           </div>
            <div class="col-md-6">
             <div id="right">COLUMN 3</div>
           </div>
          </div>
        </div>
    </div>
</div>

http://codeply.com/go/GIcPuzURbs http://codeply.com/go/GIcPuzURbs