我在某些名单上正确更改位置时遇到了一些问题。
JSFiddle快速模拟：https://jsfiddle.net/3Lu3cafj/
我有正常的列表项......
1 2 3 4 五 6 7 8
然而，在移动设备上我需要更改项目的位置，以便图像左右显示为桌面，它们是并排的，所以试图让它做...
1 3 2 五 4 7 6 8
如果你看到我的意思，只需交换一点奇怪甚至......对不起，如果在第二个数字示例上犯了错误，但会看到我对目前的代码的意思。我的代码有效....但似乎偶数不显示最后一项
@media only screen and (max-width: 767px) {
.collection-list {
.collection-list-item {
.collection-list-hover-button {
.button {
padding: 5px 8px !important;
border: 1px solid #ffffff !important;
}
}
&.collection-hover {
width: 100% !important;
margin-left: 0 !important;
margin-bottom: 0px !important;
&:nth-child(2n){
margin-left: 0;
}
&:nth-child(4n - 2) {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
transform: translateY(100%);
}
&:nth-child(4n - 1) {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
}
}
}
}<h1>
even amount
</h1>
<ul class="collection-list">
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 1">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 2">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 3">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 4">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 5">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 6">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 7">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 8">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 9">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 10">
</a>
</li>
</ul>
<h1 style="clear: both;margin-top: 3em;">
odd amount
</h1>
<ul class="collection-list">
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 1">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 2">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 3">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 4">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 5">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 6">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 7">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 8">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 9">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 10">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 11">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 12">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 13">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 14">
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
<a href="/collections/butterfly-sofa" class="position-left">
<img src="http://placehold.it/350x150?text=image 15">
</a>
</li>
</ul>
可以看到它没有显示最后一项：https://www.ambientlounge.eu/collections/outdoor-bean-bags
但在其他部分显示所有并且只能解决，因为这个有一个偶数，一个上面没有但可能是错误的....
https://www.ambientlounge.eu/collections/indoor-bean-bags
您只能在移动设备的移动/视口上看到此位置的更改
答案 0 :(得分：0)
使用flex子项上的flex属性为order创建了这个内容。
ul {
display: flex;
flex-direction: column;
}
@media (max-width: 420px) {
li:nth-child(1), li:nth-child(3) {
order: -3;
}
li:nth-child(2), li:nth-child(5) {
order: -2;
}
li:nth-child(4), li:nth-child(7) {
order: -1;
}
}<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>
</ul>