在Bootstrap 5.0中使用Response重新排序div [英] Reorder divs with responsive in Bootstrap 5.0

问题描述

我在使用Bootstrap V5.0进行网页设计时遇到了一个问题。 特别是，我有3个div A，B，C，我希望他们响应地重新排序，如下图所示。A是h2+p，B是2个按钮，C是图像。

我的第一种方法是将A和B分组为一组LG-6，将C分组为另一组LG-6，但这种方法是不合适的，因为代码必须遵循A-C-B的顺序才能拥有图片中的移动视图。

我在StackOverflow上搜索并尝试了多次关于这个问题的帖子，但解决方案都在Twitter Bootstrap 3或Bootstrap 4(使用Push/Pull类)中。一些答案说，在Bootstrap 5.0中，我们使用-Order来解决这样的问题。但我尝试了，但失败了，看完文档后，我真的不明白-Order是如何工作的。

那么，谁能帮我解决这个问题呢？非常感谢！

推荐答案

最简单的方法是在允许浮点数工作的特定断点上禁用&q；Flexbox。这可以使用所有Bootstrap 5类来完成，因此没有额外的css...

<div class="container">
    <div class="row g-3 d-flex d-md-block">
        <div class="col-md-6 float-start">
            <div class="card card-body">A</div>
        </div>
        <div class="col-md-6 float-end">
            <div class="card card-body tall">C</div>
        </div>
        <div class="col-md-6 float-start">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Floats in Bootstrap 5 demo

或者，您可以使用Bootstrap 5中的新的css网格类。但是，这需要您$enable-cssgrid使用sass：

<div class="container">
    <div class="grid">
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">A</div>
        </div>
        <div class="g-col-md-6 g-col-12" style="grid-row: span 2;">
            <div class="card card-body tall">C</div>
        </div>
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

CSS grid demo

---

相关：Bootstrap with different order on mobile version

这篇关于在Bootstrap 5.0中使用Response重新排序div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！