How to use data-label to represent images in responsive table

Question

I have a 2x4 table, which looks like this: https://codepen.io/steph2020/pen/EQjyxr

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;

}
table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}
table th,
table td {
  padding: .625em;
  text-align: center;
}
table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  table td:before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
 
  }
  table td:last-child {
    border-bottom: 0;
  }
}

#macroom{
  color:#A52A2A;
  font-size: 20px;
  letter-spacing: 1px;
}
#slinky{
  color:#000000;
  font-size: 20px;
  letter-spacing: 1px;
}
.brandImage1{
    margin-top:15px;
    margin-bottom:15px;
    height:60px;
    text-align: center;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    border-right-color: #aaa;
    box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3);
  }
  .brandImage2{
    height:60px;
    width:150px;
    text-align: center;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    border-right-color: #aaa;
    box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3);
  }
.locationIcon{
  width:30px;
}

  table, th, td {
      background-color: #fff;
      border-radius: 1px 1px 1px 1px;
      overflow: hidden;
      border-width: 1px;
      border-color: #f4f4f4;
      box-shadow: 6px 6px 18px 0 rgba(0,0,0,0.3);
      text-align: center;
}

        <table>

          <thead>
            <tr>
              <th scope="col">
                <a href="http://www.petessentials.ie/" target="_blank">
                    <img class="brandImage1" src="https://www.pawtrails.ie/wp-content/uploads/2018/01/pet-essentials-logo.jpg">
                  </a>

                  </th>
              <th scope="col">  
                <a id="macroom" href="https://www.facebook.com/juliespetshop/" target="_blank">
                    <strong>Macroom Pet Shop</strong>
                  </a>
               </th>
              <th scope="col"> 
                <a href="http://www.westcorkpetstore.net/" target="_blank">
                    <img class="brandImage2" src="https://www.pawtrails.ie/wp-content/uploads/2018/01/potty-fish.jpg">
                  </a>
                  </th>
              <th scope="col">  
                <a id="slinky" href="https://www.goldenpages.ie/slinkys-pet-shop-mitchelstown/" target="_blank">
                     <strong>Slinkys Pet Shop</strong>
                 </a> 
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Pet Essentials"> 
                <img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
                          <p>Unit 9 Kilnagleary Business Park,</p>
                          <p>Carrigaline, Co. Cork</p> 
              </td>

              <td data-label="Macroom Pet Shop">  
                <img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
                <p>3 Main St Macroom</p>
                <p>Co. Cork</p>
              </td>

              <td data-label="Potty Fish">  
                <img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
               <p>Baldwin St, Ballinwillin,</p>
                <p>Bandon, Co. Cork</p>
                    </td>


              <td data-label=" Slinkys Pet Shop">
                <img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
                          <p>Baldwin St, Ballinwillin,</p>
                          <p>Mitchelstown, Co. Cork</p>
                          </td>
            </tr>


          </tbody>
        </table>

I am using data-label to replace the images in small screens. I want to have the images show up rather than the text in small screens. Now I am using text in data-label, How to use data-label to represent images instead?

Answer 1

It's currently not possible to do that in such dynamic way using that data-label technique.

What you can do is: add specific styles to each td index, with nth-of-type. That's odd, but should work.