带有div的仅CSS多列

Question

我目前正在开发一种服务器接口。用户应该能够拖放其项目以在他的愿望之后对齐界面。最简单的方法（以及我喜欢它的工作方式）就像在Windows 8开始菜单中一样，你拖动你的块，其余的自我对齐。

我找到了相应的css属性(-preamble-)column-count。这种作品，但仅适用于文字。我的小部件是<div> - 容器。

所以这是我的问题：

1. 是否有可能只允许3行和n列？
2. 如何使列宽保持大小（目前，它会根据视口大小调整大小，即使使用-webkit-column-size [Chrome 28]也是如此。这会带来例如一行3项。
3. 如何防止列之间存在巨大差距？ -webkit-column-gap不会真正改变差距，只会将其设置为最小值。设置父容器的宽度实际上不是一个选项，因为我真的想让它变得非常动态。

所以，这是我想要得到的一个例子，但不会工作：

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

After dragging "5" behind "7"
1 | 2 | 5 | 8
3 | 4 | 9 | 10
6 | 7 | 11| 12

只是为了确保： 我没有提到拖动部分，因为我已经有了解决这个问题的方法。我目前的问题只是表格的对齐方式。

为了举个例子，我创建了一个jsfiddle： http://jsfiddle.net/mine/WmkPR/