Estoy representando datos dinámicos de una matriz de objetos en una página html. Quiero voltear el cuadro específico. En la página principal quiero mostrar la imagen y el encabezado, mientras que en la última página quiero mostrar el párrafo. Adjunto el archivo HTML y JavaScript.

El código HTML

 <div class="row rwOneOurservices ourServicesContainer" ></div> 

JavaScript donde estoy representando mis datos desde una matriz de objetos

 const FnRenderOurService = () => {
 if (ElourServicesContainer) {
 ElourServicesContainer.innerHTML = "";
 for (singleOurService of ourServices) {
 ElourServicesContainer.innerHTML += `
 <div class="col-sm-3 col-10 ourServiceElement" onclick="FnShowService('${singleOurService.id}')" id="${singleOurService.id}">
 <div class="row">
 <div class="col-md-4 col-12">
 <img
 src="${singleOurService.serviceImg}"
 alt=""
 />
 </div>
 <div class="col-md-8 col-12">
 <h5>${singleOurService.serviceName}</h5>
 </div>
 </div>
 <div class="row">
 <div class="col-12">
 <p>
 ${singleOurService.serviceShortDesc}
 </p>
 </div>
 </div>
 </div>
 `;
 }
 }
};

¿Cómo aplicar flip en cada cuadrícula por separado (podría ser sobre la base de 'Id')?