带有列表标签的网格列,我需要每3列以正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度.
这是我的例子:
<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><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>display: -webkit-flex;.
我想像这样转换输出:
1 4 7 10
2 5 8 11
3 6 9 12
重要的是我到目前为止我的Safari浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)
测试链接:
我可以使用bootstrap本地执行此操作吗？我正在使用版本4(在alpha中),但如果它适用于版本3,它应该适用于v4.
我在列中有2个div就像这样
<div class="row">
<div class="col-xs-12">
<div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
<div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
</div>
</div>
有没有办法可以让div在移动设备上交换？我不想在这里使用任何javascript,我想只使用"bootstrap"类,如果可能的话.
如果使用bootstrap是不可能的,那么请仅使用css.