Перестановка адаптивного макета Bootstrap 4

Question

Допустим, у вас есть страница с четырьмя основными блоками (каждый из которых будет содержать различное количество контента):

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

При узкой ширине браузера они должны отображаться в том же порядке, в каком они находятся вHTML:

Но при более широкой ширине они должны перегруппироваться в эту компоновку с боковой панелью, с блоками в другом порядке:

Использование схемы сетки Bootstrap 4 Есть ли способ сделать это?Я могу видеть, как переупорядочить блоки, но это только для блоков в одной строке.

ОБНОВЛЕНИЕ: Второй макет может быть сделан следующим образом, но я не вижу способа, чтобы это выглядело как первый макет:

<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

В основном это было , которое было задано до .Есть способ с Bootstrap 4, но вам нужно использовать float вместо 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