PHP - Jquery，每行下方的显示快速详细信息滑块

Recently I create one web page which has one row with 12 box. And Feature is when I Click on box, then its quick detail box (slide) open below that box and thats working fine. Now issue is web page is responsive, so in normal resolution (1366 x 768) there is two row with 6 box each.

So, when I click on any box, quick detail slider of that box is open below that 2 row. refer below image for current working web page

I use PHP for create loop and that loop generates 12 box dynamically. So basically I want that quick detail slider of box (1 to 6) will display below Row 1 and other (7 to 12) will display below Row 2.

My Code Structure (Loop for create boxes)

{foreach from=$data['campaign'] key=k item=value}

    <div class="thmbimg col-xs-6 col-md-2 col-sm-4 displayquickboxrow" id="{$value.id}" data-toggle="tooltip" data-placement="top" title="{$value.title}" >
        {if isset($value['ribbon'])}
            <div class="ribbonlisting">
                <div STYLE="color:{$value['ribbon_color']}">
                    {$value['ribbon_text']}  
                </div>
                <img src="/public/images/ribbons/{$value['ribbon']}" class="martop25" alt="" width="100px">
            </div>
            {/if}
        {if isset($value.picture)}
        {$img = $value.picture}
        <img src="/public/images/campaign/{$img}" alt="No Image" width="150" height="150" class="img-thumbnail">
<!--                                    <img src="{$path}{$img}" alt="No Image" width="150" height="150" class="img-thumbnail">-->
        {else}
        <img src="{$noimage}" alt="No Image" width="150" height="150" class="img-thumbnail">
        {/if}
    </div>

{/foreach}

Quick Detail Slider which open below Row 2

<!--     Quick Campaign Detail Start       -->

{if isset($data['campaign'])}
{$path = $imagepath}
{$custpath = $imagepathuser}
{foreach from=$data['campaign'] key=k item=value}
<div class="col-md-8 mainobj divquickdetailrow{$value.id}" id="{$value.id}" style="display:none;">
    <div class="bdr padbtmremove" style="min-height:200px;">
        <table class="width100per" id="mydiv{$value.id}">
            <tr class="mydiv{$value.id}">
                <td rowspan="2" class="pad5 bdrright padright20">
                    {if isset($value['ribbon'])}
                    <div class="ribbonlisting">
                        <div STYLE="color:{$value['ribbon_color']}">
                            {$value['ribbon_text']}  
                        </div>
                        <img src="/public/images/ribbons/{$value['ribbon']}" class="martop25" alt="" width="100px">
                    </div>
                    {/if}
                    {if isset($value.picture)}
                    {$img = $value.picture}
                    <img src="/public/images/campaign/{$img}" alt="No Image" width="150" height="150" class="img-thumbnail">
                    {else}
                    <img src="{$noimage}" alt="No Image" width="150" height="150" >
                    {/if}
                </td>
                <td class="quickdetailhead">
                    <p>
                        {if isset($value.heading)} {$value.heading} {/if}
                    </p>
                    <div class="p">{if isset($value.title)} {$value.title} {/if}</div>
                    <div class="comments-space">{if isset($value.description)} {$value.description} {/if}</div>
                </td>
            </tr>
            <tr>
                <td class="quickdetail">
                    <table class="width100per">
                        <tr class="pad5 tblcellbtn">
                            <td class="bdrright tooltip_add" data-toggle="tooltip" data-placement="bottom" >


                                {if isset($smarty.session.employee_id)}

                                    {foreach from=$likedetail['savedetail'] key=k item=value1}
                                        {assign var="empID" value=$value1.id}
                                    {/foreach}

                                    {*---------------------------------------------------------------*}
                                    {if isset($empID)}
                                        {if $empID eq 0 or $empID === NULL}
                                            <a href= "/campaign/follow/{$value.id}" title="Save Campaign"><img src="/images/client/icon/1.png" class="width24"/> Save</a>
                                        {else}
                                            {if $value1.campaign_id eq $value.id}
                                                <a href= "/campaign/unfollow/{$value.id}" title="Remove Campaign" class="tooltip_add" data-toggle="tooltip" data-placement="bottom"><img src="/images/client/icon/7.png" class="width24"/>Remove</a>
                                            {else}
                                                <a href= "/campaign/follow/{$value.id}" title="Save Campaign"><img src="/images/client/icon/1.png" class="width24"/> Save</a>
                                            {/if}

                                        {/if}
                                    {else}                  
                                    <a href= "/campaign/follow/{$value.id}" title="Save Campaign"><img src="/images/client/icon/1.png" class="width24"/> Save</a>
                                    {/if}
                                {*---------------------------------------------------------------*}
                                {else}
                                    <a href="#!" data-toggle="modal" title="Save Campaign" data-target="#mdl-login"><img src="/images/client/icon/1.png" class="width24"/> Save</a>
                                {/if}


                            </td>
                            <td class="bdrright tooltip_add" data-toggle="tooltip" data-placement="bottom" title="Print Campaign">
                                <a href="#!" onclick="PrintElem('.mydiv{$value.id}')"><img src="/images/client/icon/2.png" class="width24" /> Print</a>
                            </td>
                            <td class="bdrright tooltip_add" data-toggle="tooltip" data-placement="bottom" title="Go To Store">
                                <a href= "{$value.url}" target="_blank"><img src="/images/client/icon/3.png" class="width24" /> Store</a>
                            </td>
                            <td class="bdrright tooltip_add" data-toggle="tooltip" data-placement="bottom" title="Share on FB">
                                <div class="fb-share-button" data-href="{$finaldata['id']}" data-layout="button_count"></div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>

JS Code (Its disable this function for small devices too)

    $('.displayquickboxrow').click(function(){
    //alert($(window).width());
    var id = this.id;
    if ($(window).width() <= 770) {
        window.location = "campaign/detail/"+id;
    }
    else
        {
        $div = $(".divquickdetailrow"+id);

        $(".mainobj").not($div).hide();


        $div.toggle('fast');
        }

    return false;
}); 

In Short, My Question is That How Can I display Slider below Row 1 if I click on any box of row 1 and display it below row 2 if I click on any box of row 2

I have built an example to show you one way of doing it : http://jsfiddle.net/xnwjstac/2/

When you click on an image, you clear a gap under this image's line.

At load, line numbers are added with JS in the data-line-number attributes.

If you resize the window, the lines are recalculated.

Edit : it is buggy, I'll finish it tonight

function addRowNumbers()
{
    var savedOffset = 0, currentOffset, currentLineNumber = 0;
    $("ul li").each(function() {
        currentOffset = $(this).offset().top;
        if(currentOffset > savedOffset) {
            savedOffset = currentOffset;
            currentLineNumber++;
        }
        $(this).attr("data-line-number", currentLineNumber);
    });
    
    $("li").removeClass("pushed");
    $("li").unbind();
    
    $("li").on("click", function() {
        var lineNumber = Number($(this).attr("data-line-number")), currentOffset = $(this).offset().top;
        $("li").removeClass("pushed");
        $("li[data-line-number='" + (lineNumber + 1) + "']").addClass("pushed");
        $("#photo-info").css({ top: (currentOffset + 100) + "px" }).show();
    });
}

$(function() {
    addRowNumbers();
    $(window).on("resize", function() {
        addRowNumbers();
    });
});

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
}

li.pushed
{
    margin-top: 100px;
}

img {
    height: 100px;
}

#photo-info {
  color: white;
  background-color: grey;
  display: none;
  height: 100px;
  left: 8px;
  position: absolute;
}  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
    <li>
        <img src="https://lh3.googleusercontent.com/-hVrA9nz2158/AAAAAAAAAAI/AAAAAAAAAAA/IGnBL7jJjdw/photo.jpg" alt="kitty" />
    </li>
</ul>
<div id="photo-info">photo information photo information photo information photo information   </div>

</div>