Initially, this may seem impractical... however, it surprisingly does yield results... though its effectiveness is limited to specific scenarios and involves a plethora of eccentric numbers. Not exactly adaptable. FIDDLE (just a heads up, browser resizing required)
HTML
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
CSS
/* implementing a natural box layout model for all elements */
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style: none;
padding: 0; margin: 0;
width: 4em;
border: 1px solid orange;
overflow: hidden; /* alternative to clearing float */
}
ul li {
position: relative; /* necessary for negative top distance to function */
display: inline-block;
border: 1px solid red;
width: 2em;
height: 2em;
float: left;
clear: left;
}
ul li:nth-of-type(n+4) {
float: right;
clear: none;
top: -6em;
}
@media (min-width: 30em) {
ul {
width: auto;
float: left;
}
ul li {
float: left;
clear: none;
border: 1px solid green;
}
ul li:nth-of-type(n+4) {
float: left;
top: 0;
}
} /* =========== end === */
I'm inclined to believe there's likely a graceful jQuery solution for this... Unless your table isn't dynamically filled with varying information - you could opt for aesthetic adjustments like these or resort to absolute positioning - columns might be the more viable choice. Best of luck...