【问题标题】：Bootstrap layout - responsive rows and columns orderBootstrap 布局 - 响应式行和列顺序
【发布时间】：2020-02-09 15:39:15
【问题描述】：

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

所以，对于大型设备，我有以下布局：

并且我希望在这样的小型设备上重新排序列：

问题是...我有这个“第 2 栏”，我不能把它分成两部分：D

还有其他方法可以使用 bootstrap 实现相同的布局吗？

提前致谢！

编辑

所以，大型设备的布局应该是这样的：

<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

【问题讨论】：

能否给代码

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

要更改列顺序，列必须共享同一个父级。让它在 Bootstrap 4 中工作的唯一方法是禁用 lg 上的弹性框并使用浮点数。

<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

【讨论】：