Question

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

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

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

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

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

/！\必须将列分开以使其看起来像表格。

我担心我不能用boostrap来弄清楚怎么做。

注意：我正在编码“首先考虑小分辨率”，因此图像可能会产生误导。

赞赏任何提示：）

Answer 1

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

使用

基本上使用CSS更改某些样式

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

如果屏幕小于500px，则更改CSS（当然，您可以将500更改为您想要的任何内容）。为此，您需要在HTML <head>中使用元标记，就像这样;

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

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

修改

由于OP无法使用JQuery，因此需要纯CSS。这可能会导致问题，但有两张桌子，在使用电脑时只显示一张并在平板电脑/手机上显示另一张可能是最佳选择。

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

然后你只需要创建两个表;一个具有所需的PC结果，一个具有所需的移动结果，具有“PC＆＃39;”的ID。和＆＃39;移动＆＃39;。