1️⃣ ستون‌ها بدون breakpoint (XS)

• در Bootstrap 5، اگر هیچ breakpoint مشخص نشود، ستون‌ها برای XS یا موبایل‌ها در نظر گرفته می‌شوند.

• کلاس: col یا col-12, col-6 و …

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

• در موبایل، هر ستون کل عرض را می‌گیرد (Stacked)

2️⃣ XS با اندازه مشخص

• می‌توان از col-{number} برای تعیین عرض در موبایل استفاده کرد

<div class="row">
  <div class="col-6">ستون ۱ (نصف عرض)</div>
  <div class="col-6">ستون ۲ (نصف عرض)</div>
</div>

• در موبایل: هر ستون نصف عرض صفحه

• بدون breakpoint → XS در نظر گرفته می‌شود

3️⃣ XS Stacked (ستون‌های عمودی در موبایل)

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

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

• col-md-4 → از MD به بالا → ستون‌ها افقی

4️⃣ Gutter در XS

• فاصله بین ستون‌ها با کلاس g-0, g-1, g-2 … قابل کنترل است

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

• در موبایل‌ها هم فاصله رعایت می‌شود

✅ نکات مهم

• XS در Bootstrap 5 به صورت پیش‌فرض ستون‌ها را مدیریت می‌کند

• کلاس‌های بدون breakpoint (col, col-6, col-12) برای موبایل‌ها و صفحات کوچک استفاده می‌شوند

• ترکیب col-12 col-md-4 → برای طراحی Stacked to Horizontal عالی است

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