헤더가있는 html 여러 열 정렬되지 않은 목록

스타일 시트를 기반으로 1, 2 또는 3 개의 열이있는 정렬되지 않은 목록이 있습니다. 목록의 제목을 만들고 싶고 화면 크기에도 응답해야하므로 2 개의 열 목록이있는 경우 2 개의 제목이 목록에 정렬되고 3 개의 열이있는 경우 3 개의 제목이 표시되어야합니다. 목록은 항목이 동적이므로 항목이 얼마든지 나열 될 수 있습니다. 예 http://jsfiddle.net/francoist/AtX4K/1/

참고 : 아래 그림의 Log No Dimension (제목)은 제가 추가하려는 것입니다.

결과

CSS

    body{
     font-family: "Tahoma";
    }

    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

li{
    position: relative;
    border-bottom: 1px dotted #ccc;
    list-style: none;
    list-style-type: none;
    width: 100%;
    padding: 0;
}

ul li a {
    float: right; /* width of icon + whitespace */
    padding: 5px;
    font-size: 14px;
}

labeltotal{
    float: right;
    font-size: 24px;
}

labeldetail{
    font-size: 24px;
}
labeldetailsmall{
    font-size: 14px;
}
@media  (min-width:  480px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}
@media (min-width:  568px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}
@media  (min-width:  768px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}

HTML

<ul>
<li>
<labeldetailsmall>LOG000001 </labeldetailsmall><labeldetail>2,1 x2,3</labeldetail>        
<a href="#" onclick="alert('Hello World')">edit</a>
<a href="#" onclick="alert('Hello World')">delete</a>
</li>
<li>
<labeldetailsmall>LOG000002 </labeldetailsmall><labeldetail>2,1 x 2,3</labeldetail>
<a href="#" onclick="alert('Hello World')">edit</a>
<a href="#" onclick="alert('Hello World')">delete</a>
</li>
<li>
</ul>