I'm trying to create a table using divs and I want them to be sortable (alphabetically). Here's a snippet of two rows:

<div grid-row="" grid-pad="1.5" grid-gutter="3" grid-responsive="">
  <div grid-col="1" grid-pad="1.5">*image*</div>
  <div grid-col="4" grid-pad="1.5">A-title</div>
  <div grid-col="4" grid-pad="1.5">B-author</div>
  <div grid-col="3" grid-pad="1.5">C-tag</div>
</div>
<div grid-row="" grid-pad="1.5" grid-gutter="3" grid-responsive="">
  <div grid-col="1" grid-pad="1.5">*image*</div>
  <div grid-col="4" grid-pad="1.5">D-title</div>
  <div grid-col="4" grid-pad="1.5">E-author</div>
  <div grid-col="3" grid-pad="1.5">F-tag</div>
</div>

Using divs makes the table responsive and neatly integrated with the Cargo site - I tried out using <td> elements, but I did not get the responsive result i wished for.

Is there a way to code this using these kind of divs? The most important cell to have sortable is the ones with the "title" in them. Should there be something telling which columns to be sorted too?

The site is running on the Cargo Collective platform using jQuery 2.1.3.