Сделать данные таблицы HTML отзывчивыми

Question

У меня есть электронный магазин с этим фрагментом кода ниже как блок описания для каждого продукта. Наша проблема заключается в том, что это выглядит великолепно на больших экранах, таких как 17-дюймовый монитор для настольных ПК, но на небольших экранах для смартфонов это выглядит ужасно.

Друзья мои рассказали мне, чтобы узнать некоторые Boostrap/Flexbox и основы отзывчивого веб-дизайна. что у нас появилось так много продуктов на нашем сайте, что для каждого продукта потребуется возраст, чтобы изменить весь этот код.

Я хотел бы знать, есть ли способ изменить этот код кода ниже, чтобы он будет выглядеть хорошо даже на небольших экранах для смартфонов.

Наш код описания продукта блок довольно прост, он состоит из <table><tr> и <td> s, с левой стороны находится <td>, который содержит <img> для изображения продукта в встроенном стиле <div>. С правой стороны находится <td> с абзацем для нашего текста описания продукта.

Лучшее решение для небольших экранов будет сделать <td> с <img> появляться над <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/

Например, если ширина экрана < 960px

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

Узнать больше https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries