Say I have 12 input fields that should be arranged as 3x4, 2x6 or 1x12 depending on viewport width.

It seems pretty easy to arrange the columns like this (with this method, for example: http://webdesignerwall.com/tutorials...lumn-layouts):

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

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

1
2
3
etc.

But what I want is this:

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

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

1
2
3
etc.

Does anyone have any suggestion how to achieve this with HTML/CSS only (i.e. without JavaScript)?