Мне нужна помощь в преобразовании таблицы в адаптивные элементы div, и я не знаю, как лучше всего

* {
  box-sizing: border-box;
}

.my-wrapper {
  max-width: 800px; /* use max-width instead of width to get automatic responsive flexibility */
  margin: 0 auto; /* centers the container on the page */
  border: 1px solid blue;
}

.my-row {
  display: flex; /* direction row by default, the cells will be side by side to start */
}

.my-cell {
  width: 50%;
  padding: 20px;
  display: flex; /* yep, the cells can get flexbox layout too */
  flex-direction: column; /* each cell will have its content laid out vertically */
  align-items: center; /* centers content horizontally */
  justify-content: center; /* centers content vertically */
  border: 1px solid red;
}

.my-cell img {
  max-width: 100%; /* make the images responsive too */
  height: auto;
}

@media (max-width: 500px) { /* change the max-width in the media query to whatever width you want, you can use min-width too if you prefer */
  .my-row {
    flex-direction: column; /* force the layout to stack the cells vertically */
  }
  .my-cell {
    width: 100%; /* cells should be full width at this point */
  }
}

<div class = "my-wrapper">
  <div class = "my-row">
  
    <div class = "my-cell">
      <img src = "https://picsum.photos/200/300" />
    </div>
    
    <div class = "my-cell">
      <h2>Some title text</h2>
      <p>Some paragraph text...</p>
      <ul>
        <li>whatever</li>
        <li>you</li>
        <li>want</li>
      </ul>
    </div>
    
  </div>
</div>

@media screen and (max-width: 400px) {
table.responsive_table {
  display: block;
}
  table.responsive_table td {
    width: 100%;
    display: block;
  }
}

<table height = "557" style = "width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border = "#fff" class = "responsive_table">
  <tbody>
    <tr>
      <td style = "width: 373px; border-color: #ffffff; background-color: #ffffff;">
        <h2><img src = "http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width = "174" height = "171" alt = "" class = "wp-image-35671 alignnone size-full" style = "display: block; margin-left: auto; margin-right: auto;" /></h2>
        <h2 style = "text-align: center;"><span>Create Team Rosters</span><span></span></h2>
        <div class = "col"></div>
      </td>
      <td style = "width: 373px; border-color: #ffffff; background-color: #ffffff;">
        <div class = "col">
          <div class = "col">Easily input new clients and team rosters.</div>
          <div class = "col"></div>
        </div>
      </td>
    </tr>
    <tr>
      <td style = "width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
      <td style = "width: 373px;">
        <h2 style = "text-align: center;"><span class = "blue"><img src = "http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width = "181" height = "167" alt = "" class = "wp-image-35673 alignnone size-full" /><br /> </span><span class = "blue">Evaluate Your Players</span><span></span></h2>
      </td>
    </tr>
    <tr>
      <td style = "width: 373px;">
        <h2 style = "text-align: center;"><img src = "http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width = "174" height = "171" alt = "" class = "wp-image-35689 alignnone size-full" /></h2>
        <h2 style = "text-align: center;">More Features</h2>
      </td>
      <td style = "width: 426px;">
        <div>
          <div class = "row">
            <div class = "col">
              <p><span class = "s1" style = "font-size: 15px;"><span class = "s3"></span></span>
              </p>
              <ul class = "ul1">
                <li class = "li1"><span class = "s1">Eases communication with parents decreasing ambiguity</span></li>
                <li class = "li1"><span class = "s2"></span><span class = "s1">Customizable evaluation criteria</span></li>
                <li class = "li1"><span class = "s2"><span class = "Apple-tab-span"> </span></span><span class = "s1">Create practice plans and share videos</span></li>
                <li class = "li2"><span class = "s3">Share data and progression with your club</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div id = "lipsum"></div>
      </td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<p style = "text-align: center;">