使 HTML 表格的数据具有响应性

Question

我有一个电子商店，下面这段代码作为每个产品的描述块。我们的问题是，这在 17 英寸台式 PC 显示器等大屏幕上看起来很棒，但在较小的智能手机屏幕上看起来很糟糕。

我的朋友让我学习一些 Boostrap/Flexbox 和响应式网页设计的基础知识。问题是我们的网站上有太多的产品，以至于要花很长时间来更改每个产品的所有代码。

我想知道是否有某种方法可以转换下面的代码，使其即使在较小的智能手机屏幕上也能看起来不错。

我们的产品描述块代码很简单，它由<table>的<tr>和<td>s组成，左侧有一个<td>，其中包含<img>用于内联产品图像样式为<div>。在右侧，有一个 <td> 带有我们产品描述文本的段落。

小屏幕的最佳解决方案是让带有<img> 的<td> 出现在带有产品描述段落的<td> 上方。问题是我们不知道怎么做。请帮忙。

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

<table align="center" border="0" width="100%" style="border:1px lightgray solid;box-shadow: 1px 2px 5px gray;margin-top:15px">
<tbody>
<tr>   

<!-- LEFT IMAGE-->
<td width="50%" valign="middle" style="text-align:justify;border-top: white 10px solid;border-bottom: white 10px solid;border-left: white 10px solid">
<div style="text-align: center;margin-bottom:0px">
<img style="WIDTH: 100%" src="http://www.allcarbrandslist.com/wp-content/uploads/2015/03/mustang-symbol.jpg" >
</div>
</td>

<!-- RIGHT TEXT -->
<td width="50%" valign="middle" style="text-align:justify;padding:3%;vertical-align:middle;color: gray;border: white 10px solid; background: linear-gradient(#F7F7F7 90%, #EDEDED 100%)">
<h2 style="color:black">Random Section header</h2>
<p>RANDOM TEST PARAGRAPH: A ruler frowns a built slogan. The toy copyrights a fruit on top of the verbatim commentator. A fond mania disciplines the increased finger. The prejudice founds a warped capitalist. Will the crossing grandmother bite the dismal prophet?</p>
</td>

</tr>
</tbody>
</table>

Answer 1

我更新它（css代码）https://jsfiddle.net/zd6xrv6q/1/

例如，如果屏幕宽度

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

了解更多https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries