Bootstrap 4 - Изменить порядок расположения 5 колонок в мобильном телефоне

Question

У меня есть страница с 3 столбцами следующим образом:

<div class="row">
   <div class="col-lg-3">
        <div>**Section 1**</div>
        <div>**Section 2**</div>
   </div>
   <div class="col-lg-6">**Section 3**</div>
   <div class="col-lg-3">
        <div>**Section 4**</div>
        <div>**Section 5**</div>
   </div>
</div>

Я хочу изменить порядок разделов в мобильном телефоне, как показано ниже:

Answer 1

Вот 2 варианта ...

Используйте гибкое направление гибко:

Используйте столбец flexbox на lg и более.Контейнер row должен иметь определенную высоту.В этом случае я использовал h-100 (height: 100%;).

<div class="container vh-100">
   <div class="row h-100 flex-lg-column flex-wrap">
      <div class="col-lg-3 border flex-grow-1 overflow-auto order-3 order-lg-0">1</div>
      <div class="col-lg-3 border flex-grow-1 overflow-auto order-4 order-lg-0">2</div>
      <div class="col-lg-6 border order-first order-lg-0 min-vh-100 overflow-auto">3</div>
      <div class="col-lg-3 border flex-grow-1 overflow-auto">4</div>
      <div class="col-lg-3 border flex-grow-1 overflow-auto order-last order-lg-0">5</div>
   </div>
</div>

https://www.codeply.com/go/WDjcxLu5bC

Hack with flexbox & float:

Эта опция использует float для lg и больше, а также возврат к flexbox на экранах меньшего размера, что позволяет нам изменять порядок столбцов.когда макет укладывается вертикально.Этот макет также ограничен height:100%.

<div class="row d-lg-block vh-100">
    <div class="col-lg-3 float-left d-flex flex-column h-100 p-0">
        <div class="flex-grow-1 px-3 border">1</div>
        <div class="flex-grow-1 px-3 border">2</div>
    </div>
    <div class="col-lg-6 float-left border order-first order-lg-0 h-100 overflow-auto">3</div>
    <div class="col-lg-3 float-left border h-50">4</div>
    <div class="col-lg-3 float-left border h-50">5</div>
</div>

https://www.codeply.com/go/eXY3HFr5A4