如何用Bootstrap实现按列纵向排序的响应式布局？

现有一段Bootstrap代码，能实现不同屏幕尺寸下的列布局：xl屏幕4列、lg屏幕3列、sm屏幕2列、默认1列：

<div class="row">
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">A</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">B</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">C</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">D</div>

    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">E</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">F</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">G</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">H</div>

    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">I</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">J</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">K</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">L</div>
</div>

这段代码运行正常，但内容是横向优先排列：

ABCD
EFGH
IJKL

现在需要实现纵向优先排列：根据屏幕尺寸，内容按从上到下的顺序分布到各列。比如：

• xl屏幕：列1是A/D/G/J，列2是B/E/H/K，列3是C/F/I/L
• lg屏幕：列1是A/E/I，列2是B/F/J，列3是C/G/K，列4是D/H/L

最初考虑过为每个断点单独创建row并控制显示，但想找更简洁的实现方式。

解决方案 #

不用拆分多个row，推荐用以下两种更优方式实现：

方法1：CSS多列布局（最灵活）

直接给容器添加响应式列数配置，不需要给每个子元素加col类：

<div class="container">
    <div class="custom-columns">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
        <div>J</div>
        <div>K</div>
        <div>L</div>
    </div>
</div>

配合自定义响应式CSS：

/* 默认1列 */
.custom-columns {
    column-count: 1;
    column-gap: 1rem; /* 和Bootstrap gutter保持一致 */
}

/* 确保子元素不会跨列被分割 */
.custom-columns > div {
    break-inside: avoid;
    margin-bottom: 1rem;
}

/* sm屏幕2列 */
@media (min-width: 576px) {
    .custom-columns { column-count: 2; }
}

/* lg屏幕3列 */
@media (min-width: 992px) {
    .custom-columns { column-count: 3; }
}

/* xl屏幕4列 */
@media (min-width: 1200px) {
    .custom-columns { column-count: 4; }
}

这种方式完全适配响应式断点，且不需要固定容器高度，是最省心的实现方案。

方法2：Flexbox纵向换行（适合高度可控场景）

利用Flexbox的纵向排列+换行特性，通过响应式高度控制列数：

<div class="row flex-column flex-wrap custom-flex-container">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
    <div class="col">F</div>
    <div class="col">G</div>
    <div class="col">H</div>
    <div class="col">I</div>
    <div class="col">J</div>
    <div class="col">K</div>
    <div class="col">L</div>
</div>

配合CSS设置响应式高度：

.custom-flex-container {
    height: auto;
}

@media (min-width: 576px) {
    .custom-flex-container { height: 200px; }
}

@media (min-width: 992px) {
    .custom-flex-container { height: 150px; }
}

@media (min-width: 1200px) {
    .custom-flex-container { height: 120px; }
}

这种方式依赖容器高度，适合内容高度统一的场景，灵活性不如多列布局。

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