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

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

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

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

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

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

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

2️⃣ Auto Layout Columns با LG

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

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

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

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

3️⃣ Stacked to Horizontal با LG

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

• col-12 → XS/SM/MD → ستونی

• col-lg-4 → LG به بالا → افقی

4️⃣ Offset و Order با LG

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

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

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

5️⃣ Gutter در LG

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

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

✅ نکات مهم

• Breakpoints LG برای دسکتاپ‌ها و لپ‌تاپ‌های بزرگ عالی است

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

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

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