sortable with weird DOM

Here's an example markup, which looks like a regular table if you add
in some css:
<div class="headers">
    <div class="headeritem">id</div>
    <div class="headeritem">name</div>
    <div class="headeritem">address</div>
    <div class="headeritem">phone</div>
</div>
<div class="scroller"> 
    <div class="grid">
        <div class="row" style="top:0px">
            <div class="col c0">1</div>
            <div class="col c1">John Smith</div>
            <div class="col c2">123 Oak Street</div>
            <div class="col c3">555-123-4567</div>
        </div>
        
    </div>
</div>
I can easily do a $('.header').sortable() and drag a header around
with a placeholder in its spot. When I begin to drag "name," a
placeholder class designed to look like an empty space takes its place
(forcePlaceholderSize=true). If I drag "name" slightly farther to the
right, "address" shifts, and the placeholder moves there.
So far so good. The rest I havent tried yet -slash- dont know how.
For this case of dragging "name," I'd also like $('.c1'),
corresponding to the columns with names in them, to act like
placeholders. My plan is to:
1) on "start:", give all ".c1"s the placeholder class, so now the
entire column looks 'blank'
2) helper returns a clone with a small number of entries from the
"name" column copied into it.
3) So now I'm holding onto the "name" header with "John Smith" and 4
other results below it in a little window, and the entire column looks
like a placeholder. When I drag to the right, over "address," the
headers will re-order, since they were declared sortable, but <i>how
do I make the <div class="grid"> columns mimic this motion?</i> I want
this to occur whether the mouse is over my <div class="headers"> or
<div class="grid">