这是我的例子：

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>

我想转换这样的输出：

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

这是我迄今为止所尝试的,并且在其他浏览器上工作得很好,但与Safari浏览器不兼容,除非我添加：display：-webkit-flex ;.

<style>
ul{
        margin: 0;
        padding: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 150px;
        width:auto;
}

li{
        float: left;
        display: inline-block;
        list-style: none;
        position: relative;
        height: 50px;
        width: 50px;
}
    </style>

它的重要我得到这个工作为Safari浏览器到目前为止我似乎无法解决这个问题,我会适当的任何帮助:)

测试链接：
http://jsfiddle.net/rafcastro77/3zd7yspg/59/