ul li rows but ordered

Question

I am creating a mega menu in bootstrap, and I wanted to display in the cleanest easiest method, 4 rows ( or more ) but 4 is good, menu items.

I made a fiddle here http://jsfiddle.net/ozzy/cX5DU/

The issue seemingly is that the li's are rendered across the page in the order read via html..

Is there a way of ordering the columns, so that the li's display in numeric order vertically ?

Tagged as jquery because I think jquery may be the saviour here.

css is:

 ul{   width:760px;   margin-bottom:20px;   overflow:hidden;   border-top:1px solid #ccc; } 
 li{   line-height:1.5em;   border-bottom:1px solid #ccc;   float:left;   display:inline; } 
  #double li  { width:50%;} /* 2 col */ 
  #triple li  { width:33.333%; } /* 3 col */ 
  #quad li    { width:25%; } /* 4 col */ 
  #six li     { width:16.666%; } /* 6 col */

Answer 1

I'd keep the source html with a single ul that lists the items in order, then do some shuffling via JS when the DOM is loaded:

$(document).ready(function(){    
    var $ul = $("#quad"),
        $lis = $ul.children(),
        i,
        cols = 4,
        rowHeight = Math.ceil($lis.length / cols);

    for (i=0; i+rowHeight<$lis.length; i+=rowHeight)
        $("<ul></ul>").append($lis.slice(i,i+rowHeight))
                      .insertBefore($ul);
});

Demo: http://jsfiddle.net/cX5DU/1/

This creates addition ul elements each with their own portion of the original list. You'd need to update the CSS to float the uls instead of floating the lis (as shown in the fiddle).