Reordering DIV Sections

I have 12 div sections on a page and I want the user to be able to
specify the order in which they appear on the page. I'm thinking of
something like this but want to ask what people think of this approach
and maybe suggest another way or an article on how to do this.

// grab the innerhtml by:
var theSpan1 = getElementById("span1")
var theSpan1HTML = theSpan1.innerHTML

// then grab the innerHTML of the span you want to "swap" it to:
var theSpan2 = getElementById("span2")
var theSpan2HTML = theSpan2.innerHTML

// and switch the innerHTML's of the span by:
theSpan1.innerHTML = theSpan2HTML
theSpan2.innerHTML = theSpan1HTML


<form>
<span id="span1">
<div id="div1">
<select size="1" name="ddlOrder1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span1/Div1
</div>
</span>

<br />

<span id="span2">
<div id="div2">
<select size="1" name="ddlOrder2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span2/Div2</div>
</span>

<br />

<span id="span3">
<div id="div3">
<select size="1" name="ddlOrder3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span3/Div3</div>
</span>
<input type="submit" value="Save Profile" class="smalltext"
name="btnSaveProfile" onclick="changeOrder()">
</form>