如何让Bootstrap列根据可用空间自适应堆叠并按指定顺序排列

我要实现的布局顺序是：Col-1 先展示，接着是 Col-2，之后 Col-3、Col-4、Col-5、Col-6 依次换行排列。现在用Bootstrap的Row和Col布局，移动端显示正常，但大屏上会出现难看的空白。

我的代码如下：

<Row>
    <Col lg="6">
        Agent Details
    </Col>
    <Col lg="6">
        <div style={{
            // 这里只是模拟宽高可变，暂时硬编码
            height: '100px',
            width: '100px'
        }}>
            Map
        </div>
    </Col>
    <Col lg='6'>
        About Section 
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </Col>
    <Col lg="6">
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
        </ul>
    </Col>
    <Col lg="6">
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
            <li>Point 5</li>
            <li>Point 6</li>
        </ul>
    </Col>
    <Col lg="6">
        Thank you blah blah
    </Col>
</Row>

期望效果：移动端保持Col1到Col6的顺序依次排列；大屏上Col1和Col2占第一行，Col3和Col4占第二行，Col5和Col6占第三行，紧凑排列没有空白。现在的问题是不同Col高度不一样，导致Bootstrap的布局出现错位空白。

解决办法 #

下面几个方案都能搞定，选适合你的就行：

1. 拆分Row分组（最稳妥）

把内容按每两个Col一组拆成独立的Row，强制每行只放两个Col，彻底避免高度不一致带来的错位：

<Row>
    {/* 第一行：Agent Details + Map */}
    <Col lg="6">
        Agent Details
    </Col>
    <Col lg="6">
        <div style={{ height: '100px', width: '100px' }}>
            Map
        </div>
    </Col>
</Row>
<Row className="mt-3"> {/* mt-3加个间距，可选 */}
    {/* 第二行：About + 第一组列表 */}
    <Col lg="6">
        About Section 
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </Col>
    <Col lg="6">
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
        </ul>
    </Col>
</Row>
<Row className="mt-3">
    {/* 第三行：第二组列表 + 感谢语 */}
    <Col lg="6">
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
            <li>Point 5</li>
            <li>Point 6</li>
        </ul>
    </Col>
    <Col lg="6">
        Thank you blah blah
    </Col>
</Row>

2. 用强制换行元素（不拆分Row）

如果不想拆Row，可以在每两个Col之后加一个占满宽度的元素，只在大屏显示，强制Row换行：

<Row className="align-items-start">
    <Col lg="6">
        Agent Details
    </Col>
    <Col lg="6">
        <div style={{ height: '100px', width: '100px' }}>
            Map
        </div>
    </Col>
    {/* 大屏下强制换行，移动端隐藏 */}
    <div className="w-100 d-none d-lg-block"></div>
    <Col lg='6'>
        About Section 
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </Col>
    <Col lg="6">
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
        </ul>
    </Col>
    {/* 再次强制换行 */}
    <div className="w-100 d-none d-lg-block"></div>
    <Col lg="6">
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
            <li>Point 5</li>
            <li>Point 6</li>
        </ul>
    </Col>
    <Col lg="6">
        Thank you blah blah
    </Col>
</Row>

w-100让元素占满整行，d-none d-lg-block确保只在大屏生效，这样就能强制每行只显示两个Col，不会错位。

3. 改用CSS Grid（更灵活）

如果项目允许用CSS Grid，直接定义网格布局会更省心，自动按顺序填充，不会出现空白：

<div style={{ 
    display: 'grid', 
    gridTemplateColumns: '1fr', 
    gap: '1rem' 
}} className="lg:grid-cols-2">
    <div>Agent Details</div>
    <div>
        <div style={{ height: '100px', width: '100px' }}>Map</div>
    </div>
    <div>
        About Section 
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>
    <div>
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
            <li>Point 5</li>
            <li>Point 6</li>
        </ul>
    </div>
    <div>Thank you blah blah</div>
</div>

移动端是单列，大屏自动分成两列，内容按顺序填充，完全不会有空白问题。

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