Responsive columns

Get Started
1

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/responsive-column-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)?

2

(I didn’t find any edit button - is there any?)

PS. I’m aware of the column-count possibility, but I wanted something more IE-friendly, and I’d rather not duplicate any of the fields (and hide either one in the set depending on width).