If you want to do this using JavaScript I would suggest using an array, and
iterating through it. This way you can simply increment or decrement the
index. However, unless it is critical that this be done client-side, I would
suggest that you do it server-side so that you can avoid unnecessary messy
JavaScript (I am a fan of JavaScript, but if it does not improve the
appearance, performance, or usability of a page, I prefer server-side). If
it is critical and you need help creating the script, let me know. Good
Luck!

<script>
    function cloneNodeList(list)
    {
        var a = new Array();
        for (var i=0; i < list.length; ++i)
            a[i] = list[i];
        return a;
    }
    function reverseDiv()
    {
        var div = document.getElementById('foo');
        var spans = cloneNodeList(div.childNodes);
        for (var i=0; i < spans.length; ++i)
            div.removeChild(spans[i]);
        for (var i=spans.length-1; i >= 0; --i)
            div.appendChild(spans[i]);
    }
    </script>
<div class="paragraph" id="foo" onclick="reverseDiv();">
 <span class="line">line 1</span>
 <span class="line">line 2</span>
 <span class="line">line 3</span>
</div>

-- bruce (sqlwork.com)