Create Two-Column Responsive Layout

Bootstrap

Technical Specification

Create a layout where on mobile content stacks, and on md+ screens it becomes 2 equal columns.

Input/Output Samples

Input:mobile view

Output:single column

Input:desktop view

Output:two columns side by side

Optimal Logic Path

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">Left</div>
    <div class="col-12 col-md-6">Right</div>
  </div>
</div>

Architectural Deep-Dive

Bootstrap grid uses breakpoints (sm, md, lg, etc.) for responsive layouts.