本文介绍了在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
这篇关于在Bootstrap 5.0中使用Response重新排序div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！