Question

使用bootstrap v4.0，我正在开发一个显示右侧＆＃34;侧边栏＆＃34;的网站布局。屏幕处于XL模式时。侧边栏中有很多项目。我想在它的中间某处切换2个方框。

在Bootstrap 3中，您可以逐渐向左或向右移动细胞。 Bootstrap 4，我可以看到有一种重新排序整列的方法，并且有一种方法可以将单元格发送到第一个或最后一个。但我无法弄清楚如何只移动1个单元格1步（基本上，跳过相邻单元格）。在我的情况下，看看当从L调整大小到XL时，2和3（应该）如何改变顺序

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

我确实通过将 order-xl-N 类应用到所有侧边栏框中来找到解决方案（将它们应用到某些框似乎无法工作）。感觉就像一个打瞌睡..所以我很好奇也许我错过了什么？如果侧边栏有20个项目，那么它们是否都需要有n个类才能让它们中的2个在堆栈中间切换位置？

这是我的个人情况html标记。

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

虽然我确实寻求一个优雅的解决方案来解决我的情况，但是通用的一个也很棒..在某些页面上我优先考虑方框5并将其置于XL侧边栏的顶部，从而避免复杂的排序逻辑，我想要我的课程只影响方框2和3 ..所有这些都适用于我的facebook video downloader项目..社交社交视频下载..

Answer 1

是的，你必须使用CSS3 flexbox来重新排序你的div。
您可以通过col-lg-7替换col-12 col-lg-7来保存代码。试试看，你会看到。

移动相邻的网格单元格（没有完全重新排序）

1 个答案: