html - 针对不同的设备尺寸显示不同的表格/网格布局

Question

我正在创建一个网站，我需要在其中显示一些内容{图像+文本}。我需要它们并排显示以适应 PC 上的显示，并为移动设备显示从下往上的顺序。
在图像中，左侧显示了移动设备上的预期输出，

PC 上的右侧。

我可以通过检测用户代理{如果是移动设备还是PC}在每个TR中放置一个TD，但我需要使用CSS的更有效的解决方案。 DIV 也可以代替 Table 布局。

Answer 1

有很多方法可以实现这一点，我不喜欢使用表格，而使用 div，您指出这是一个选项。

使用bootstrap grid system我想到了一种方法。

我会这样做:

在父容器中将 block 按 2 进行分组，默认情况下将它们设置为 50% 宽度，并使用响应式查询在较小的屏幕上将它们设置为 100% 宽度。

这是我所讨论内容的简化标记:

<div class="row">
  <div class="content-block">1</div>
  <div class="content-block">2</div>
</div>

<div class="row">
  <div class="content-block">3</div>
  <div class="content-block">4</div>
</div>

.content-block {
  width:50%;
  float:left;
}

@media only screen and (max-width: 767px) {
  .content-block {
    width:100%;
  }
}

这是一个更详细且有效的示例:

fiddle