CSS nth-child转换翻译计算轻微的bug

Question

我有一些问题，正确地改变一些名单上的位置。

的jsfiddle快速模拟了：https://jsfiddle.net/3Lu3cafj/

我有列表项为正常...

然而在移动我需要改变项目的位置，以便图像显示左右两侧，因为它们并排放置在桌面上，所以试图使它成为...

如果你明白我的意思，只是换一个有点像奇数和偶数...抱歉，如果在第二个数字为例进行错误，但将看到我的代码我目前有什么意思。代码中，我有作品....但似乎在偶数量不显示最后一个项目

@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

你只看到移动/或这是后话flex是为取得移动尺寸

Answer 1

的视口的位置这个不断变化的，用在柔性儿童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>