Twitter bootstrap 移动相邻网格单元（无需完全重新排序）

使用BootstrapV4.0，我正在处理一个站点布局，当屏幕处于XL模式时，它会显示右侧的“侧栏”。侧边栏中有许多项。我想在它中间的某处切换2个盒子。 在Bootstrap3中，您可以逐渐向左或向右移动单元格。bootstrap4，我可以看到有一种方法可以对整个列重新排序，还有一种方法可以将单元格发送到第一个或最后一个。但我不知道如何只移动一个单元格一步（基本上，跳过相邻的单元格）。在我的情况下，看看2和3（应该）在从L调整到XL时如何改变顺序

000000000       000000 1111
1111 2222  ==>  000000 3333
333333333       000000 2222
444444444       000000 4444
555555555       000000 5555

通过将order-xl-N类应用于所有侧边栏框，我确实找到了解决给定情况的方法（仅将它们应用于某些框似乎不起作用）。感觉像个套鞋。。所以我很好奇也许我遗漏了什么？如果侧边栏有20个项目，它们是否都需要Ord-N类，只有2个在堆栈的中间切换位置？

这是我个人的情况

<div class="row">
    <div class="col-12 col-xl-8">box 0</div> 
    <div class="col-12 col-xl-4">
        <div class="row">
            <div class="col-12 col-lg-7 col-xl-12">box 1</div>
            <div class="col-12 col-lg-5 col-xl-12">box 2</div>
            <div class="col-12 d-block">box 3</div>
            <div class="col-12">box 4</div>
            <div class="col-12">box 5</div>
        </div>
    </div>
</div>

方框0
方框1
方框2
方框3
方框4
方框5

虽然我确实在为我的处境寻找一个优雅的解决方案，但广义的解决方案也会很好。。在一些页面上，我对方框5进行了优先级排序，并将其放在XL侧边栏的顶部，因此为了避免复杂的排序逻辑，我希望我的类只影响方框2和3。。所有这些都是为了我的项目。。社交视频下载

• 是的，您必须使用CSS3 FlexBox来重新排序您的div

• 您可以通过仅将col-12 col-lg-7替换为col-lg-7来保存代码。试试看，你会看到的

---

请发布HTML标记我认为我的HTML标记不相关，-这是一个广义的问题。但如果你坚持的话，那就是。垂直或水平，这都无所谓，我只是想弄清楚，在bootstrap 4.0中，是否可以像在3.3中一样切换相邻单元。在问题本身中发布代码。

.row

类仅用于包含

.col-*

。我没有看到

col-*

类。我已经完全修改了这个问题，但是它的标题。。希望这能改变一切？