JQuery UI Sortable + Laravel Collection Chunk: Rows draggable instead of single elements

I've got a Problem. As I am using Bootstrap, I have rows containing 3 images each. In order to do it like this (because the images come from the databse) I'm using the chunk() function available in Laravel. This allows me to insert a .row, then show 3 images with a .col-md-4 each and then creates another .row and so on.

<div id="sortable-image-container">
    @foreach($product->images->chunk(3) as $chunk)
        <div class="row">
            @foreach($chunk as $image)
                <div class="col-md-4">
                    <div class="card">
                        <div class="header text-right">
                            <a href="" class="btn btn-danger">X</a>
                        </div>
                        <div class="content">
                            <img src="http://placehold.it/500x500" alt="" class="center-block img-responsive">
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endforeach
</div>

Now I want to integrate jQuery UI's Sortable to those images using:

$('#sortable-image-container').sortable({});

However, it declares a row as a draggable element, instead of a product-image box.

In the picture here are two rows, the first containing 3 images boxes and the second one image box. as you can see I am grabbing the entire row to drag instead of a single element. Because I'm using chunk() I can't find a nice solution to make single elements draggable.

via Scarwolf