HTMLテーブルのデータを応答させる

Question

私はそこにある各製品の説明ブロックとして、以下のコードを電子ショップに持っています。私たちの問題は、17インチのデスクトップPCモニターのような大きな画面では見た目がよく見えますが、スマートフォンの画面が小さければひどいです。私たちのサイトにはたくさんの製品があり、各製品のすべてのコードを変更するには時間がかかります。

私は、以下のコードの平和をどのように変換するかについて知りたいと思います。小さなスマートフォン画面でも良好に見えます。

私たちのコードは非常に簡単です。 <table>の<tr>および<td>があり、左側に<td>があり、インラインで製品画像の<img>が含まれています。<div>。右側には、<td>があり、製品説明文の段落があります。

小さな画面の最適な解決策は、製品説明の段落の<td>の上に<img>と表示されるようにすることです。問題はどのようにしてわからないということです。助けてください。例えば

<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

Iは、（CSSコード）を更新https://jsfiddle.net/zd6xrv6q/1/

画面幅< 960ピクセル幅

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

場合：ここ

コード↓（https://jsfiddle.net/zd6xrv6q/ JS FIDDLE）であります

詳しくはhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries