Css 按列用内容填充HTML表

根据视口的大小，我有一组数据试图显示在响应网格中

此数据按字母顺序排列，为了便于阅读，我希望按列顺序显示：

|---------|--------|--------|
| Abi     | Donald | George |
| Boris   | Ernest | Harold |
| Charlie | Frank  | Ivan   |

在具有更宽视口的桌面上，这可能如下所示：

|-------|---------|--------|--------|------|
| Abi   | Charlie | Ernest | George | Ivan |
| Boris | Donald  | Frank  | Harold |      |

<div class="mydata col-lg-3 col-md-3 col-sm-6 col-xs-12"><ul><li>Abi</li> <li>Boris<li> <li> Charlie</li></ul></div>

但是，由于表是响应的，因此列数（因此行数）可能会更改。通过使用

.col-md-3

（例如）并让额外的项目溢出到下一行，通过Twitter逐行引导，很容易做到这一点。但是，我想按列垂直填充我的表

---

有没有一种方法可以只使用CSS（例如，不必使用Javascript重新排序和计算）？

这非常简单，您仍然可以使用引导，如下所示：

|-------|---------|--------|--------|------|
| Abi   | Charlie | Ernest | George | Ivan |
| Boris | Donald  | Frank  | Harold |      |

<div class="mydata col-lg-3 col-md-3 col-sm-6 col-xs-12"><ul><li>Abi</li> <li>Boris<li> <li> Charlie</li></ul></div>

---

不知道我是否理解。你想让Abi、Boris和Charlie在同一行吗？目标是建立一个响应表，其中数据按列而不是按行的顺序填充到表中。如果是一个非常大的屏幕，所有的数据都可以放在一行中，那么Abi、Boris和Charlie都会在同一行中。不幸的是，我从来没能让它正常工作过——不管有多少数据，它总是保持在一列中。