show hidden div below current row of divs in responsive layout with jquery

show hidden div below current row of divs in responsive layout with jquery

I have a responsive layout for an image gallery that will show 3, 2 or 1
images per row based on user's screen width. here is the part of the CSS
that will decide how many images to show per row:
@media only screen and (max-width : 480px) {
/* Smartphones: 1 image per row */
.box {
width: 100%;
padding-bottom: 100%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablets: 2 images per row */
.box {
width: 50%;
padding-bottom: 50%;
}
}
@media only screen and (min-width : 651px) {
/* large screens: 3 images per row */
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}
for each ".box" div, there is another (initially hidden) div that should
be displayed below the current row of images when tapping a button.
on a desktop browser showing three images per row, it would look like this
<div class="box">
<div class="boxInner">
<img src="../img/img1.jpg">
<div class="infoBox">
<button class="detailLink" name="det1">Show Details</button>
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="../img/img2.jpg">
<div class="infoBox">
<button class="detailLink" name="det2">Show Details</button>
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="../img/im3.jpg">
<div class="infoBox">
<button class="detailLink" name="det3">Show Details</button>
</div>
</div>
</div>
<div class="detailWrapper" id="det1">
<div class="detail">Details for img1</div>
</div>
<div class="detailWrapper" id="det2">
<div class="detail">Details for img2</div>
</div>
<div class="detailWrapper" id="det3">
<div class="detail">Details for img3</div>
</div>
This is the script that will toggle the divs with details:
<script>
$(".detailLink").click(function () {
var id = $(this).attr("name");
$("#"+id).slideToggle("slow");
});
</script>
But if I resize the browser window so that only one or two images per row
are displayed, obviously the initially hidden div for the first and second
image will not be displayed below the first row anymore, but below the
second row.
I have no idea how to rewrite this code so it will display the initially
hidden div always in the row below the actual image, no matter if 1, 2 or
3 images are displayed per row. I could create three separate pages and
redirect browsers to them based on screen width, but that seems somewhat
redundant and there must be a better solution.
My first question on Stackoverflow - hope I did it right.