CSS nth-child transform翻译计算略有错误

Question

我在某些名单上正确更改位置时遇到了一些问题。

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

我有正常的列表项......

1 2 3 4 五 6 7 8

然而，在移动设备上我需要更改项目的位置，以便图像左右显示为桌面，它们是并排的，所以试图让它做...

1 3 2 五 4 7 6 8

如果你看到我的意思，只需交换一点奇怪甚至......对不起，如果在第二个数字示例上犯了错误，但会看到我对目前的代码的意思。我的代码有效....但似乎偶数不显示最后一项

＆＃13;

＆＃13;

@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%);
        }

      }
    }
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

可以看到它没有显示最后一项：https://www.ambientlounge.eu/collections/outdoor-bean-bags

但在其他部分显示所有并且只能解决，因为这个有一个偶数，一个上面没有但可能是错误的....

https://www.ambientlounge.eu/collections/indoor-bean-bags

您只能在移动设备的移动/视口上看到此位置的更改

Answer 1

使用flex子项上的flex属性为order创建了这个内容。

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;