1️⃣ ستون‌های XXL (Responsive Columns)

• کلاس: col-xxl-{number}

• در XS, SM, MD, LG, XL → ستون‌ها ستونی (Stacked)

• از XXL به بالا → ستون‌ها افقی (Horizontal)

<div class="container">
  <div class="row">
    <div class="col-xxl-6">ستون ۱</div>
    <div class="col-xxl-6">ستون ۲</div>
  </div>
</div>

• XS تا XL → ستون‌ها ستونی

• XXL و بالاتر → ستون‌ها افقی، هر کدام نصف عرض

2️⃣ Auto Layout Columns با XXL

<div class="row">
  <div class="col-xxl">ستون ۱</div>
  <div class="col-xxl">ستون ۲</div>
  <div class="col-xxl">ستون ۳</div>
</div>

• ستون‌ها برابر تقسیم می‌شوند

• XS تا XL → ستون‌ها ستونی

• XXL و بالاتر → افقی

3️⃣ Stacked to Horizontal با XXL

<div class="row">
  <div class="col-12 col-xxl-4">ستون ۱</div>
  <div class="col-12 col-xxl-4">ستون ۲</div>
  <div class="col-12 col-xxl-4">ستون ۳</div>
</div>

• col-12 → XS تا XL → ستونی

• col-xxl-4 → XXL به بالا → افقی

4️⃣ Offset و Order با XXL

<div class="row">
  <div class="col-xxl-4 order-xxl-2">ستون دوم</div>
  <div class="col-xxl-4 order-xxl-1">ستون اول</div>
  <div class="col-xxl-4 order-xxl-3">ستون سوم</div>
</div>

• ترتیب ستون‌ها از XXL به بالا تغییر می‌کند

• XS تا XL → ستون‌ها همان ترتیب HTML دارند

5️⃣ Gutter در XXL

<div class="row g-xxl-3">
  <div class="col-xxl-6">ستون ۱</div>
  <div class="col-xxl-6">ستون ۲</div>
</div>

• فاصله بین ستون‌ها فقط از XXL به بالا اعمال می‌شود

✅ نکات مهم

• Breakpoints XXL برای مانیتورهای فوق عریض عالی است

• ترکیب با XS, SM, MD, LG, XL (col-12 col-xxl-4) → Stacked to Horizontal

• کلاس‌های col-xxl-{number}, order-xxl, offset-xxl طراحی واکنش‌گرا را آسان می‌کنند

• Gutter می‌تواند فاصله بین ستون‌ها را کنترل کند