根据屏幕大小将元素列表分成 2 到 3 列

Question

所以我必须将一个旧站点（硬编码样式的旧站点）升级为 2k17 响应式网站。所以我基本上使用 CSS 和 HTML （还有 PHP 和 Javascript 但对于控制器和模型交互 - 我想尽可能避免它因为干净的代码很重要）。

再一次，如果可能的话，我想要一个基于HTML/CSS的解决方案，谢谢。

我正在使用 bootstrap 3.3.7 及其网格显示来使其正常工作，但有一页让我感到困扰。

我有一个要在 table 中显示的元素列表，根据屏幕大小，它由两列或三列组成（见下图）。

The type of display I'd like to get

/!\ 必须保留元素的顺序。

/!\ 必须将列分开以使其看起来像 table。

恐怕我对 boostrap 的了解还不够好，不知道该怎么做。

注意：我正在编码 "thinking about little resolutions first" 所以图像可能会产生误导。

感谢任何提示:)

Answer 1

我一直在摆弄一些 JQuery 和 CSS，这可能会对你有所帮助。

基本上用 CSS 和

改变了一些样式

@media screen and (max-width: 500px){
}

如果屏幕小于 500px，则更改 CSS（当然，您可以将 500 更改为您想要的任何值）。为此，您需要在 HTML <head> 中使用元标记，如下所示；

<meta name="viewport" content="width=device-width">

还使用 JQuery 在屏幕宽度 = 500 时移动元素。

编辑：

由于 OP 无法使用 JQuery，因此需要纯 CSS。这可能会导致问题，但是有两个表并且在使用 pc 时只显示一个表并在 tablet/mobile phone 上显示另一个可能是最好的选择。

#mobile {
  display: none;
}
@media screen and (max-width: 600px) {
  #mobile {
    display: block;
  }
  #pc {
    display: none;
  }
}

那么你只需要创建两个表；一个具有所需的 PC 结果，一个具有所需的移动结果，ID 为 'pc' 和 'mobile'。

Divide a list of elements into 2 to 3 columns depending on screen size