Схема начальной загрузки - адаптивный порядок строк и столбцов

Question

Сейчас я борюсь с порядком столбцов и строк макета начальной загрузки, и мне интересно, возможно ли то, что я пытаюсь сделать, с помощью системы сетки строк / столбцов bootrsap.

Итак, у меня есть следующий макет для больших устройств:

И я хочу, чтобы столбцы переупорядочивались на небольших устройствах, таких как:

Проблема в том ... У меня есть этот "столбец 2", и я не могу разбить его на две части: D

Есть лиеще один способ добиться того же типа лайта с помощью начальной загрузки?

Заранее спасибо!

Редактировать

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

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-8">
      <div>
        Imagine a big data table here
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="row">
        <div class="col-12">
          Columns inside row 2
        </div>
        <div class="col-12">
          Columns inside row 2
        </div>
        <div class="col-12">
          Columns inside row 2
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          Columns inside row 3
        </div>
        <div class="col-12">
          Columns inside row 3
        </div>
        <div class="col-12">
          Columns inside row 3
        </div>
      </div>
    </div>
  </div>
</div>

Посмотреть на коде ручки: https://codepen.io/lucas-labs/pen/yLLeVxO

Answer 1

Чтобы изменить порядок столбцов, столбцы должны иметь одного и того же родителя. Единственный способ заставить это работать в Bootstrap 4 - отключить flexbox на lg и использовать float.

<div class="container-fluid">
    <div class="row mainrow d-lg-block d-flex overflow-auto">
        <div class="col-12 col-lg-8 first-column float-left">
            <div class="big-data-table">
                Imagine a big data table here
            </div>
        </div>
        <div class="col-12 col-lg-4 second-column float-right order-first">
            <div class="row myrow">
                <div class="col-12">
                    Columns inside row 2
                </div>
                <div class="col-12">
                    Columns inside row 2
                </div>
                <div class="col-12">
                    Columns inside row 2
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 second-column float-right">
            <div class="row myrow">
                <div class="col-12">
                    Columns inside row 3
                </div>
                <div class="col-12">
                    Columns inside row 3
                </div>
                <div class="col-12">
                    Columns inside row 3
                </div>
            </div>
        </div>
    </div>
</div>

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