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

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.