HTML:

<div class="pt1wrapper">
                    <div class="pt1img">
                        <img src="img/hevonen.jpg" class="pt1"/>
                      </div>
                        <div class="pt1table">
                            
                          <div class="pt1row">
                            <div class="pt1cell pt1rowspanned">
                              <img src="img/hevonen.jpg" class="pt1"/>
                            </div>
                            <div class="pt1cell pt1th">
                              Rotu, sukupuoli
                            </div>
                            <div class="pt1cell">
                                rotu, sukupuoli
                              </div>
                          </div>
                          <div class="pt1row">
                            <div class="pt1cell pt1empty"></div>
                            <div class="pt1cell pt1th">
                                Syntynyt, ikä
                              </div>
                              <div class="pt1cell">
                                  syntynyt, 0-vuotias
                                </div>
                          </div>
                          <div class="pt1row">
                            <div class="pt1cell pt1empty"></div>
                            <div class="pt1cell pt1th">
                                Väri, säkä
                              </div>
                              <div class="pt1cell">
                                  väri, 100 cm
                                </div>
                          </div>
                          <div class="pt1row">
                            <div class="pt1cell pt1empty"></div>
                            <div class="pt1cell pt1th">
                                Rekisterinumero
                              </div>
                              <div class="pt1cell">
                                  <a href="#" target="_blank">VH00-000-0000</a>
                                </div>
                          </div>
                          <div class="pt1row">
                            <div class="pt1cell pt1empty"></div>
                            <div class="pt1cell pt1th">
                                Omistaja
                              </div>
                              <div class="pt1cell">
                                <a href="#" target="_blank">omistaja</a>
                                </div>
                          </div>
                          <div class="pt1row">
                            <div class="pt1cell pt1empty"></div>
                            <div class="pt1cell pt1th">
                                Kasvattaja
                              </div>
                              <div class="pt1cell">
                                <a href="#" target="_blank">kasvattaja</a>
                                </div>
                          </div>
                          <div class="pt1row">
                            <div class="pt1cell pt1empty"></div>
                            <div class="pt1cell pt1th">
                                Painotus
                              </div>
                              <div class="pt1cell">
                                painotuslaji
                                </div>
                          </div>
                          <div class="pt1row">
                            <div class="pt1cell pt1empty"></div>
                            <div class="pt1cell pt1th">
                                Koulutustaso
                              </div>
                              <div class="pt1cell">
                               taso
                                </div>
                          </div>
                        </div>
                      </div>

CSS:

@media screen and (min-width: 801px) {
                    .pt1wrapper {
                      position: relative;
                      margin-top: 50px;
                      margin-bottom: 50px;
                    }
                    .pt1table {
                      margin: 0 auto;
                      display: table;
                      position: relative;
                      width: 90%;
                      background-color: #fff;
                      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
                    }
                    .pt1row {
                      display: table-row;
                    }
                    .pt1cell {
                      display: table-cell;
                      padding: 10px;
                    }
                    .pt1cell.pt1empty {
                      border: none;
                      width: 300px;
                    }
                    .pt1cell.pt1rowspanned {
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      width: 300px;
                      padding: 0;
                    }
                  
                    .pt1th {
                      font-weight: bold;
                    }
                  
                    .pt1 {
                      margin-left: 30px;
                      width: 250px;
                      height: 365px;
                      object-fit: cover;
                      margin-top: -35px;
                      border: 5px solid #fff;
                      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
                    }
                  
                    .pt1img {
                      display: none;
                    }
                  
                  }
                  @media screen and (max-width: 800px) {
                    
                    .pt1cell.pt1rowspanned {
                      display: block;
                    }
                    .pt1wrapper {
                      position: relative;
                      margin-top: 50px;
                      margin-bottom: 50px;
                    }
                    .pt1table {
                      margin: 0 auto;
                      display: block;
                      position: relative;
                      width: 90%;
                      background-color: #fff;
                      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
                    }
                    .pt1row {
                      display: flex;
                    }
                    .pt1cell {
                      display: block;
                      padding: 10px;
                    }
                    .pt1cell.pt1empty {
                      border: none;
                      width: 300px;
                      display: none;
                    }
                    .pt1cell.pt1rowspanned {
                      display: none;
                    }
                  
                    .pt1th {
                      font-weight: bold;
                      width: 50%;
                      padding-left: 40px;
                    }
                  
                    .pt1 {
                      margin-left: 30px;
                      width: 250px;
                      height: 365px;
                      object-fit: cover;
                      margin-top: -35px;
                      border: 5px solid #fff;
                      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
                    }
                  
                    .pt1img {
                      display: block;
                      width: 90%;
                      margin: 0 auto;
                      text-align: center;
                      margin-bottom: 5px;
                    }
                  }
                  
                  @media screen and (max-width: 500px) {
                    .pt1th {
                      font-weight: bold;
                      width: 120px;
                      padding: 10px;
                    }
                  }

Perustieto taulukot

Taulukko 1 (Responsiivinen)