Pure CSS reflowing grid-based layout with hidden sections

I'm trying to streamline the code for the 'Treatments' section of this website.

The site is responsive, the tiles are floats and reposition themselves with browser size. Clicking on a tile reveals a hidden section below it.

At the moment each tile has around three identical hidden sections positioned in the code, one for each of the three tile positions, to ensure it always appears below the desired tile - i.e. the 'Bunion Deformity' tile's hidden section appears after 'Osteoarthritis' in the widest format, after 'Ingrowing Toenails' in the midsize format and after 'Bunion Deformity' in the smallest format. Javascript is used to select the correct one.

It works but it's a very messy solution. Is there a way I can only paste the hidden section in the HTML code once and have it appear in the desired position regardless of the tile layout? Ideally using CSS alone.

Thanks!