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>