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

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

• از XS تا SM → ستون‌ها Stacked

• از SM به بالا → ستون‌ها Horizontal

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

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

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

2️⃣ Auto Layout Columns با SM

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

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

• در XS → ستون‌ها ستونی

• در SM و بالاتر → ستون‌ها افقی

3️⃣ Stacked to Horizontal با SM

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

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

• col-sm-4 → SM به بالا → هر ستون یک سوم عرض

4️⃣ Offset و Order با SM

• جابه‌جایی و فاصله در صفحات کوچک

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

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

• XS همچنان به صورت پیش‌فرض نمایش داده می‌شود

5️⃣ Gutter در SM

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

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

✅ نکات مهم

• Breakpoints SM برای صفحات کوچک و موبایل‌های بزرگ عالی است

• کلاس‌های col-sm-{number} و col-sm ستون‌ها را واکنش‌گرا می‌کنند

• ترکیب با XS (col-12 col-sm-4) → Stacked to Horizontal

• می‌توان از order-sm و offset-sm برای جابه‌جایی و فاصله استفاده کرد