Rearranging responsive Bootstrap 4 grid layout

问题:

Let's say you have a page with four main blocks in it (they would each contain varying amounts of content):

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

At narrow browser widths they should appear in the same order they are in the HTML:

But at wider widths they should rearrange into this layout, with a sidebar, with the blocks in a different order:

Using Bootstrap 4's grid layout is there a way to do this? I can see how to reorder blocks, but that only seems to be good for blocks within the same row.

UPDATE: The second layout could be done like this, but I can't see a way to make that look like the first layout:

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

回答1:

Basically this has been asked before. There is a way with Bootstrap 4, but you need to use floats instead of flexbox.

Here d-sm-block is used to apply the floats only on sm and wider. Flexbox is used for mobile which allows the ordering to work.

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

Demo: https://www.codeply.com/go/ksaw8Aq2lP