WordPress responsive 3 column with displaying post from top to bottom

I want to display my post in 3 columns, and the post only will show a maximum of 12 posts.
I have been researching a lot but none of the examples display from top to bottom, most of them are from left to right.

So far I have been successfully showing my post with limited 12 posts and display in this:

12 11 10
9 8 7
6 5 6
3 2 1

But what I want to show is:

12 |8 |4
11 |7 |3
10 |6 |2
9 |5 |1

While scaling down the site, the posts will show as this:

12 |6
11 |5
10 |4
9 |3
8 |2
7 |1

And another thing is, each of the columns will have a line except for the last column.

I am been following this guide
and was using inline-block ,ul, li to control the whole layout

I have no idea how I can control the post and added the line between them if using Inline-block
anyway how I can make it? Or is there other way to make it?