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

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

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

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

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

• موبایل و SM → ستون‌ها ستونی

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

2️⃣ Auto Layout Columns با MD

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

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

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

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

3️⃣ Stacked to Horizontal با MD

<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/SM → ستونی

• col-md-4 → MD به بالا → افقی

4️⃣ Offset و Order با MD

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

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

• XS و SM همچنان ستون‌ها در همان ترتیب HTML نمایش داده می‌شوند

5️⃣ Gutter در MD

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

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

✅ نکات مهم

• Breakpoints MD برای تبلت‌ها و لپ‌تاپ‌های کوچک عالی است

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

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

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