Question

我有一个电子商店，下面这段代码作为每个产品的描述块。我们的问题是这在大屏幕上看起来很棒，例如17＆＃34;台式电脑显示器，但在较小的智能手机屏幕上，它看起来很可怕。

我的朋友告诉我要学习一些Boostrap / Flexbox和响应式网页设计的基础知识。问题是我们在网站上有这么多产品，需要很长时间才能更改每个产品的所有代码。

我想知道是否有一些方法可以改变下面的代码和平，这样即使在较小的智能手机屏幕上看起来也会很好。

我们的产品说明代码块非常简单，它由<table>＆＃39; <tr>和<td>组成，左侧有{{1}对于内联样式<td>中的产品图片，其中包含<img>。在右侧，我们的产品描述文本中有一段<div>。

小屏幕的最佳解决方案是使带有<td>的{{1}}显示在带有产品说明段落的<td>上方。问题是我们不知道如何。请帮忙。

这是代码↓（JS FIDDLE：https://jsfiddle.net/zd6xrv6q/）

＆＃13;

<img>

＆＃13;

Answer 1

例如，如果屏幕宽度< 960像素

@media (max-width: 960px) {
  td {
     display: block;
     width: 100%;
  }
}