如何使用引导程序拆分列中的数据

Question

以下示例将在 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

但我希望 ABC 在第一列，DEF 在第二列，GHI 在第三列，JKL 在第四列......换句话说，根据屏幕的不同，从上到下按字母顺序分布在各列中：

ADGJ
BEHK
CFIL

AEI
BFJ
CGK
DHL

AG
BH
CI
DJ
EL
FL

A
B
C
D
E
F
G
H
I
J
K
L

我的第一个想法是遍历数据并为每个屏幕尺寸创建“行”，并使用显示方法在相应的屏幕上显示它，但必须有更好的方法吗？

Answer 1

感谢@isherwood 回复这篇文章： How to order a grid vertically in Bootstrap

//CSS

.column-order {
  --count: 3;
  column-count: var(--count);
  column-gap: 0;
}

.column-order>div {
  width: 100%;
}

@media screen and (max-width: 992px) {
  .column-order {
    --count: 2;
  }
}

@media screen and (max-width: 576px) {
  .column-order {
    --count: 1;
  }
}

//html

<div class="column-order">
  <div class="col border">Field1</div>
  <div class="col border">Field2</div>
  <div class="col border">Field3</div>
  <div class="col border">Field4</div>
  <div class="col border">Field5</div>
  <div class="col border">Field6</div>
  <div class="col border">Field7</div>
  <div class="col border">Field8</div>
  <div class="col border">Field9</div>
  <div class="col border">Field10</div>
  <div class="col border">Field11</div>
</div>

虽然这确实有效，但我面临一个问题。 在我的 HTML 中，我向每个 div 添加了“py-1”，以便为内容留出一些空间。 然而，在 iPad 上，它看起来像这样：

调整我的浏览器屏幕大小不会显示此问题。 就好像填充一直到下一个“列”一样？