Bootstrap 4中的自定义布局问题 更新：如果2.3必须在2.1下的2.2右边浮动

如何解决Bootstrap 4中的自定义布局问题 更新：如果2.3必须在2.1下的2.2右边浮动

我尽了最大努力，但无法解决我的问题-现在请您的专家帮助我。随附示例代码和屏幕截图，以便于更好地理解。

我想要并且无法实现的我希望列2.3出现在台式机的2.1列下以及移动设备的2.2列下（在移动2.1上已经出现在2.2和2.3的顶部，这是正确的）

我需要帮助以使2.3在2.1下浮动/推动。非常感谢您的帮助。

<div class="container p-4 p-sm-5">
    <div class="row">
        <div class="col-md-auto bg-light border rounded pt-2 d-none d-sm-block mr-4">
            <h1>1.1</h1>
        </div>
        <div class="col">
            <div class="row">
                <div id="dashboard-header" class="col ss-tutor-header rounded">
                    <h1>1.2</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-auto order-1 order-sm-2 bg-light border rounded">
                    <h1>2.1</h1>
                </div>
                <div class="col order-2 order-sm-1 bg-light border rounded">
                    <h1>2.2</h1>
                </div>
                <div class="col-md-auto order-3 order-sm-3 bg-light border rounded">
                    <h1>2.3</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-auto order-1 order-sm-2 bg-light border rounded">
                    <h1>3.1</h1>
                </div>
                <div class="col order-2 order-sm-1 bg-light border rounded">
                    <h1>3.2</h1>
                </div>
            </div>
        </div>
    </div>
</div>

解决方法

此处的窍门是在md的断点处和向上的2.3之前添加一个不可见的块（宽度为100％，高度为0），并反转该行的方向，使其从左到右：

<div class="row">
    <div class="col-md-auto ...">1.1</div>
    <div class="col">
        <div class="row">
            <div id="dashboard-header" class="col ...">
                1.2
            </div>
            <div class="row **flex-md-row-reverse**">
                <div class="col-md-auto ... order-1 order-sm-2 **order-md-1**...">
                    2.1
                </div>
                <div class="col order-2 order-sm-1 **order-md-2** ...">
                    2.2
                </div>
                **<div class="d-none d-md-block order-md-3 invisible-block" />**
                <div class="col-md-auto order-3 **order-md-4** ...">
                    2.3
                </div>
            </div>
            <div class="row">
                ...
            <div>
        </div>
    <div>
</div>

希望阅读并告诉我添加的更改并不难（我将其“突出显示”）。为了将2.3换行，您确实需要一个元素，该元素需要100％的宽度才能强制使用。

这就是为什么我设置一个CSS类，该类占用100％的宽度但0的高度：

.invisible-block {
    width: 100%;
    height: 0;
}

并且要在md断点处将2.3置于2.1下，您确实需要反转行方向：从右到左。因此，您需要在md断点处重新设置2.1和2.2的顺序。

演示： https://jsfiddle.net/davidliang2008/hq04g2fa/39/

更新：如果2.3必须在2.1下的2.2右边浮动

每个OP作者的评论是，当2.2的内容垂直溢出时，2.3必须浮动在2.2的右侧。

在不更改结构并重复至少2.1的情况下是不可能的：

<div class="row">
    <div class="col-md-auto ...">1.1</div>
    <div class="col">
        <div class="row">
            <div id="dashboard-header" class="col ...">
                1.2
            </div>
            <div class="row">
                <div class="col-md-auto **d-sm-none** ...">
                    2.1
                </div>
                <div class="col ...">
                    2.2
                    Dummy Text Dummy Text Dummy Text
                </div>
                <div class="col-md-auto">
                    **<div class="row">
                        <div class="d-none d-sm-block col-12 ...">
                            2.1 Copy
                        </div>
                        <div class="col-12 ...">
                            2.3
                        </div>
                    </div>**
                </div>
            </div>
            <div class="row">
                ...
            <div>
        </div>
    <div>
</div>

您需要将2.1和2.3连续显示为一列，并由外部列包裹，以便当2.2垂直溢出时，2.3将停留在2.1下方和2.2的右侧。

但是由于在sm断点处2.1和2.2的切换顺序不同，所以没有办法这样做，因为2.1包裹在嵌套在该列内的另一行中。

演示： https://jsfiddle.net/davidliang2008/hq04g2fa/60/