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

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

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

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

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

• موبایل، تبلت و دسکتاپ کوچک → ستون‌ها ستونی

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

2️⃣ Auto Layout Columns با XL

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

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

• XS/SM/MD/LG → ستون‌ها ستونی

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

3️⃣ Stacked to Horizontal با XL

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

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

• col-xl-4 → XL به بالا → افقی

4️⃣ Offset و Order با XL

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

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

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

5️⃣ Gutter در XL

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

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

✅ نکات مهم

• Breakpoints XL برای مانیتورهای خیلی بزرگ عالی است

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

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

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