Anyone have any idea how to css column from left to right

The most practical methods I can find on the web are these:
http://stackoverflow.com/questions/12332528/how-to-display-list-items-as-columns
http://davidwalsh.name/css-columns
But I want it to be arranged like this one:

1     2     3
4     5     6
7

Code (markup):

Note that I know how to make it look like that with:

.this_class ul li {
float: left;
display: inline;
margin-right: 15px;
}

Code (markup):

But I want column to make it neatly fit into mobile device screen when I add a tab on the right with auto screen adjust without doing much on JavaScript.

Thank you,

 

You could change dislay:inline to display:inline-block and that may do the trick.

 

Maybe bootstrap can help you?

getbootstrap.com/examples/grid

 

This plus : float:right should do the trick