It sounds like you’re asking about stacked horizontal layouts in Bootstrap 5 — layouts where items stack vertically on small screens but appear horizontally side-by-side on larger screens.

Here’s how you can achieve that using Bootstrap 5 utilities, mainly the Grid and Flex system.

? Bootstrap 5 Stacked Horizontal Layouts

1. Using the Grid system

Create columns that stack vertically on smaller devices and display horizontally on larger devices by specifying breakpoints:

<div class="container">  <div class="row">    <div class="col-12 col-md-4">      <div class="p-3 border bg-light">Column 1</div>    </div>    <div class="col-12 col-md-4">      <div class="p-3 border bg-light">Column 2</div>    </div>    <div class="col-12 col-md-4">      <div class="p-3 border bg-light">Column 3</div>    </div>  </div></div>

• .col-12 makes each column full width (stacked) on extra small to small devices.

• .col-md-4 makes each column 4 units wide (three columns side-by-side) on medium and up devices.

2. Using Flexbox Utilities

You can also use flexbox utilities with responsive classes:

<div class="d-flex flex-column flex-md-row">  <div class="p-3 border bg-light flex-fill">Item 1</div>  <div class="p-3 border bg-light flex-fill">Item 2</div>  <div class="p-3 border bg-light flex-fill">Item 3</div></div>

• flex-column stacks items vertically on small devices.

• flex-md-row arranges them horizontally starting from medium devices and up.

• flex-fill makes items grow to fill the available space equally.

3. Summary

If you want a specific example like stacked buttons, nav items, or cards that switch from vertical to horizontal, let me know!