显示不同设备大小的不同表格/网格布局

Question

我正在创建一个网站，我需要显示一些内容{image + text}。我需要它们看起来并排显示以适合PC上的显示，并显示移动设备的tom-bottom订单。
在图像中，左侧显示移动设备上的预期输出，

PC上的右侧。

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

Answer 1

你应该做的就是在网站的PC版本中为CSS制作默认样式，然后根据需要重新设计移动版本的另一个样式，但这次是在这个模板中：

 @media only screen and (max-width: 500px) {
    body {
        background-color: blue;
    }
}

PS：请务必为所需的设备指定正确的最大宽度。

Answer 2

有很多方法可以实现这一点，我不想使用表格并使用你记下的div作为选项。

使用bootstrap grid system方法是一个可以想到的选项。

这是我将如何做到的：

在父容器中将块分组为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

Answer 3

最好的解决方案之一就是网格系统。您可以参考以下链接。

Bootstrap是前端开发的最佳框架之一。

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp