如何以特定方式重新排序引导程序中的元素

Question

在 Bootstrap 5 中，我想在桌面和移动设备之间实现重新排序，就像这张图片一样

我已经尝试了position: absolute的order类和解决方法，但这并不像我想的那样工作。

我还发现有人试图实现相同的目标，但可能使用旧的引导程序并且没有令人满意的解决方案（我想避免float ）。 此外，绿色加红色部分的高度可以高于蓝色部分。

没有重新排序的简单代码在这里：

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="row"> <div class="col-12 col-xxl-6"> <div style="height:20px; background-color:green;"></div> </div> <div class="col-12 col-xxl-6"> <div style="height:60px; background-color:blue;"></div> </div> <div class="col-12 col-xxl-6"> <div style="height:40px; background-color:red;"></div> </div> </div>

Answer 1

可能的解决方案。

<div>
<div className='1'>Blue component</div>
<div className='2'>Green and Red component</div>
<div>

<div col-sm-6 d-flex>
<div className='1'>Blue component</div>
<div className='2'>Green and Red component</div>
</div>

Answer 2

您可以使用display: flex属性，在引导程序中它将是带有.flex- * https://getbootstrap.com/docs/5.0/utilities/flex/的类

并更好地了解display: flex的工作原理https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

您可以通过使用不同的.d-*显示实用程序类复制绿色部分来做到这一点。 第一个实例应使用.d-xxl-none隐藏在断点上方，第二个实例应使用.d-none隐藏在断点下方，并使用.d-xxl-block显示在上面：

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="row"> <div class="col-12 col-xxl-6 d-xxl-none"> <div style="height:20px; background-color:green;"></div> </div> <div class="col-12 col-xxl-6"> <div style="height:60px; background-color:blue;"></div> </div> <div class="col-12 col-xxl-6"> <div class="d-none d-xxl-block" style="height:20px; background-color:green;"></div> <div style="height:40px; background-color:red; "></div> </div> </div>

Answer 4

这是一个可能的解决方案。 您可以添加justify-content: flex-end; 到您的行，这会将红色col-6对齐到末尾或右侧。

 .row { justify-content: flex-end; }

 <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <div class="container"> <div class="row"> <div class="col-6"> <div style="height:100px; background-color:blue;"></div> </div> <div class="col-6"> <div style="height:100px; background-color:green;"></div> </div> <div class="col-6"> <div style="height:50px; background-color:red;"></div> </div> </div> </div>