JQuery UI Sortable + Laravel Collection Chunk: строки, перетаскиваемые вместо отдельных элементов

У меня проблема. Поскольку я использую Bootstrap, у меня есть строки, содержащие 3 изображения в каждой. Для того, чтобы сделать это так (потому что изображения из базы данных) я использую chunk() функция доступна в Laravel. Это позволяет мне вставить .row, а затем показать 3 изображения с .col-md-4 каждый, а затем создает другой .row и так далее.

<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="{{ route('products.imageDelete', ['pid' => $product->id, 'iid' => $image->id]) }}" 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>

Теперь я хочу интегрировать Sortable jQuery UI в эти изображения, используя:

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

Однако он объявляет строку как перетаскиваемый элемент вместо поля изображения продукта.

На рисунке две строки: первая содержит 3 блока изображений, а вторая — блок изображений. как вы можете видеть, я перетаскиваю всю строку вместо одного элемента. Поскольку я использую chunk (), я не могу найти хорошее решение, чтобы сделать отдельные элементы перетаскиваемыми.