在 Bootstrap 5 中，我想像這張圖片一樣實作桌面和移動設備之間的列重新排序
我已經嘗試過使用 的order課程和解決方法position: absolute，但這并不像我想的那樣作業。
我還發現有人試圖實作相同的目標，但可能使用舊的引導程式并且沒有令人滿意的解決方案（我想避免float）。此外，綠色加紅色部分可以比藍色部分具有更高的高度。
沒有重新排序的簡單代碼在這里：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>uj5u.com熱心網友回復：
您可以使用該display: flex屬性，在引導程式中它將是帶有https://getbootstrap.com/docs/5.0/utilities/flex/的類.flex- *
并更好地了解display: flex作業原理
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
uj5u.com熱心網友回復：
您可以通過使用不同的.d-*顯示實用程式類復制綠色部分來完成此操作。第一個實體應隱藏在斷點上方，.d-xxl-none第二個實體應隱藏在斷點下方，.d-none并顯示在上方.d-xxl-block：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375586.html
標籤：css 推特引导 bootstrap-5