重新排列响应式 Bootstrap 4 网格布局

Question

假设您有一个包含四个主要块的页面（每个块包含不同数量的内容）：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

在较窄的浏览器宽度下，它们应该以与它们在 HTML 中相同的顺序出现：

但是在更宽的宽度上，它们应该重新排列成这种布局，带有侧边栏，块的顺序不同：

使用 Bootstrap 4 的网格布局有没有办法做到这一点？我可以看到如何reorder 块，但这似乎只适用于同一行中的块。

更新：第二个布局可以这样完成，但我看不出有什么方法可以让它看起来像第一个布局：

<div class="container">
  <div class="row">
    <div class="col-sm-9">2</div>
    <div class="col-sm-3">
      <div>3</div>
      <div>1</div>
      <div>4</div>
    </div>
  </div>
</div>

Answer 1

基本上这是asked before。 Bootstrap 4 有一种方法，但您需要使用 floats 而不是 flexbox。

这里d-sm-block 用于仅在sm 和更宽的范围内应用浮动。 Flexbox 用于移动设备，允许订购工作。

<div class="row d-sm-block">
    <div class="col-sm-9 order-2 order-md-0 float-left">2</div>
    <div class="col-sm-3 order-3 order-md-0 float-right">3</div>
    <div class="col-sm-3 order-1 order-md-0 float-right">1</div>
    <div class="col-sm-3 order-4 order-md-0 float-right">4</div>
</div>

演示：https://www.codeply.com/go/ksaw8Aq2lP