Make HTML table's data responsive

Question

I have an e-shop with this piece of code below as a description block for each product there. Our problem is that this looks great on large screens such is 17" desktop PC monitor but on smaller smartphone screens it looks horrible.

Friends of mine told me to learn some Boostrap/Flexbox and basics of responsive webdesign. The problem is that we got so many products on our site that it would take ages to change all that code for each product.

I would like to know whether there is some way how to transform that peace of code below, so that It would look good even on smaller smartphone screens.

Our code of product description block is quite simple, It consists of <table>'s <tr> and <td>s, on the left side there is a <td> which contains <img> for product image in inline styled <div>. On the right side, there is a <td> with the paragraph for our product decription text.

The best solution for small screens would be to make the <td> with an <img> to appear above the <td> with product description paragraph. The problem is we have no idea how. Please help.

Here is the code ↓ (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

I update it (css code) https://jsfiddle.net/zd6xrv6q/1/

For example if screen width < 960px

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

Learn more https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries