Bootstrap 5 实现响应式图文布局：大屏左右错落 小屏堆叠展示

实现方案 #

你可以直接使用Bootstrap 5自带的响应式工具类实现需求，不需要编写额外自定义CSS，两种可选实现思路如下：

方案1：浮动方案（保留文字环绕效果）

适合需要大屏下长文本绕排在图片下方的场景，核心是用带断点的工具类让浮动仅在大屏生效：

class AboutSection extends Component {
  render() {
    const isOdd = IsOdd(this.props.index);
    // 类规则：小屏图片100%宽无浮动，大屏25%宽按奇偶左右浮动加边距
    const imageClass = `img-fluid my-4 rounded w-100 w-md-25 ${isOdd ? 'float-md-start me-md-4' : 'float-md-end ms-md-4'}`;

    return (
      <section className="p-4">
        <div className="container">
          <div>
            <img className={imageClass} src={Test} alt={this.props.imageAltText} />
            <h2>{this.props.header}</h2>
            <p className="lead my-3">{this.props.body}</p>
            {this.props.subsection.map((item, idx) => (
              <AboutSubsection key={idx} subheader={item.subheader} subbody={item.subbody} />
            ))}
          </div>
        </div>
      </section>
    );
  }
}

用到的Bootstrap类说明：

• w-100 w-md-25：屏幕宽度小于768px（md断点）时图片占满全宽，大于等于768px时宽度为25%
• float-md-start/end、me-md-4/ms-md-4：仅在大屏生效浮动和对应边距，小屏自动取消浮动，图片默认排在文本上方

方案2：栅格方案（更稳定无环绕）

适合希望图片和文本完全分区展示、不会出现文字绕排的场景，用响应式顺序类实现左右交替：

class AboutSection extends Component {
  render() {
    const isOdd = IsOdd(this.props.index);
    return (
      <section className="p-4">
        <div className="container">
          <div className="row g-4 align-items-start">
            {/* 图片列：小屏默认排第一，大屏按奇偶调整顺序 */}
            <div className={`col-12 col-md-3 ${isOdd ? 'order-md-1' : 'order-md-2'}`}>
              <img className="img-fluid rounded w-100" src={Test} alt={this.props.imageAltText} />
            </div>
            {/* 文本列：小屏默认排第二，大屏按奇偶调整顺序 */}
            <div className={`col-12 col-md-9 ${isOdd ? 'order-md-2' : 'order-md-1'}`}>
              <h2>{this.props.header}</h2>
              <p className="lead my-3">{this.props.body}</p>
              {this.props.subsection.map((item, idx) => (
                <AboutSubsection key={idx} subheader={item.subheader} subbody={item.subbody} />
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }
}

这个方案兼容性更强，不会出现文本长度不足时的布局错位问题，是更推荐的通用实现思路。

额外注意：React中DOM元素的类属性需要使用className而非class，避免属性识别异常。

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