在Bootstrap 5.0中使用Response重新排序div

本文介绍了在Bootstrap 5.0中使用Response重新排序div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在使用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