Got it! Here's how to work with Bootstrap 5 Grid Large (.col-lg-*) — designed for large screens (?992px width).

?? Bootstrap 5 .col-lg-* Grid

• The .col-lg-* classes control column widths on large devices and above (screens 992px and wider).

• Below 992px, columns revert to stacking vertically or use smaller breakpoint classes if specified.

? Basic .col-lg-* Usage

<div class="container">  <div class="row">    <div class="col-lg-4">One third width on large+</div>    <div class="col-lg-8">Two thirds width on large+</div>  </div></div>

• On large screens (?992px), first column is 4/12 wide, second is 8/12.

• On smaller screens, columns stack vertically (full width).

? Responsive Example Mixing Breakpoints

<div class="container">  <div class="row">    <div class="col-12 col-md-6 col-lg-3">Full width xs, half md, quarter lg</div>    <div class="col-12 col-md-6 col-lg-3">Same</div>    <div class="col-12 col-md-6 col-lg-3">Same</div>    <div class="col-12 col-md-6 col-lg-3">Same</div>  </div></div>

• Extra small (<576px): columns are full width stacked.

• Medium (?768px): two columns per row.

• Large (?992px): four equal columns in a row.

? Offset with .offset-lg-*

Push a column to the right on large screens:

<div class="container">  <div class="row">    <div class="col-lg-4 offset-lg-4">Centered on large screens</div>  </div></div>

? Ordering on Large Screens .order-lg-*

Change column order on large screens:

<div class="container">  <div class="row">    <div class="col-lg-4 order-lg-3">Third on large</div>    <div class="col-lg-4 order-lg-1">First on large</div>    <div class="col-lg-4 order-lg-2">Second on large</div>  </div></div>

Quick Recap

If you want, I can create a full layout example using .col-lg-* or show how .col-lg-* works combined with other breakpoints!