Core Code
Core Code Modern Dev Handbook

MD Breakpoint Layout

Use col-md classes so columns stack on small screens and split on medium screens.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<div class="container py-5">

<div class="row">

<div class="col-md-6 bg-primary text-white p-4">
Left Column
</div>

<div class="col-md-6 bg-light p-4">
Right Column
</div>

</div>

</div>

</body>
</html>

More BS5 Breakpoints Examples (7)

example Basic Breakpoint Columns open example example Multiple Breakpoints open example example Stacked to Horizontal Layout open example example Responsive Visibility open example example Responsive Container open example example Responsive Navbar Layout open example example Responsive Card Grid open example