如何在Bootstrap中划分栅格系统？中等屏分2列、小屏分1列需求咨询

Hey there! Let's break down how to get this responsive grid working exactly how you want it. Bootstrap's grid system is built around mobile-first principles, so we can use its built-in classes to handle the different screen sizes easily.

Core Concept #

Bootstrap uses a 12-column layout. For medium screens (md, starting at 768px wide), we want each column to take up half the row — that's 6 out of 12 columns. For small screens (sm, below 768px), each column should span the full row width, which means 12 columns.

Working Code Example #

<div class="container">
  <div class="row">
    <!-- First Column -->
    <div class="col-md-6 col-sm-12">
      Your first column content goes here!
    </div>
    <!-- Second Column -->
    <div class="col-md-6 col-sm-12">
      Your second column content goes here!
    </div>
  </div>
</div>

Class Breakdown #

• col-md-6: On medium-sized screens and larger (≥768px), this element takes up 6 of the 12 available columns. Two of these will fit side-by-side, creating your 2-column layout.
• col-sm-12: On small screens and smaller (<768px), this element spans all 12 columns, making each column stack vertically into a single-column layout.

Quick Simplification Tip #

Since Bootstrap is mobile-first, you could skip the col-sm-12 class entirely and just use col-md-6. By default, any column class without a smaller screen size specified will automatically stack to full width on smaller screens. Adding col-sm-12 just makes your layout intent clearer for anyone reading your code later — totally optional but helpful for readability!

内容的提问来源于stack exchange，提问作者ahmed