自举布局-响应的行和列顺序

Question

我现在正在为引导程序布局的列和行的顺序而苦苦挣扎，我想知道我尝试使用Bootrsap的行/列网格系统是否甚至可以做到这一点。

因此，对于大型设备，我具有以下布局：

我希望在这样的小型设备上重新输入列：

问题是...我有这个“第2栏”，我不能将其分为两部分：D

是否有另一种方法可以使用引导程序来实现相同的layot？

谢谢！

编辑

因此，大型设备的布局应如下所示：

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

在codepen上查看它：https://codepen.io/lucas-labs/pen/yLLeVxO

Answer 1

要更改列顺序，列必须共享相同的父列。使它在Bootstrap 4中起作用的唯一方法是禁用lg上的flexbox并使用浮点数。

<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