重新排列自适应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