1️⃣ ستون‌ها در موبایل ستونی و در دسکتاپ افقی

• استفاده از کلاس‌های Responsive Columns: col-{breakpoint}-{number}

• در موبایل (xs) بدون breakpoint → ستون‌ها به صورت عمودی قرار می‌گیرند

• در breakpoint مشخص → ستون‌ها افقی می‌شوند

<div class="container">
  <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>
</div>

• توضیح:

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

  • col-md-4 → در دسکتاپ هر ستون ۴ واحد (یک سوم) می‌شود (Horizontal)

2️⃣ Stacked to Horizontal با Auto Layout

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

• بدون تعیین عدد ستون (col-md) → عرض ستون‌ها برابر تقسیم می‌شود

• موبایل → ستونی، دسکتاپ → افقی

3️⃣ Stacked to Horizontal با Gutter (فاصله بین ستون‌ها)

• کلاس g-3, g-4 برای فاصله افقی و عمودی

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

• فاصله بین ستون‌ها در دسکتاپ و موبایل حفظ می‌شود

4️⃣ Stacked to Horizontal با Nested Columns

<div class="row">
  <div class="col-12 col-md-8">
    ستون اصلی
    <div class="row">
      <div class="col-6">ستون داخلی ۱</div>
      <div class="col-6">ستون داخلی ۲</div>
    </div>
  </div>
  <div class="col-12 col-md-4">ستون کناری</div>
</div>

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

✅ نکات مهم

• ترکیب col-12 با col-md-* باعث Stacked to Horizontal می‌شود

• برای ریسپانسیو بودن حرفه‌ای همیشه بهتر است حداقل breakpoint برای دسکتاپ مشخص شود (sm, md, lg)

• می‌توان از gutter و nested columns برای کنترل فاصله و طراحی پیچیده استفاده کرد

• این روش برای طراحی موبایل فرندلی و صفحات واکنش‌گرا ضروری است