使用CSS重新排序Squarespace索引图像块？

Question

我已经看过几次这个问题了，但是我无法重新使用发布的代码。

我正在尝试更改Squarespace中照片网格的顺序，以使其在台式机上显示一种方式，但在移动设备上重新排序。

我有索引图库页面，这些页面交替显示图像布局（对于全屏显示，我有两张图像并排，其中一个在文本上）。我已经更改了台式机的顺序，因此section1 =左侧的图像，右侧带文本的图像，section2 =左侧的图像带有图像，右侧的图像（共4个部分）。

在移动视图上，流程正在堆叠图像，所以我得到带有文本的图像/图像/带有文本/图像/图像的图像。

我是否更改了每个部分的查看顺序？

网页是：https://jaguar-dog-jzz6.squarespace.com/

Answer 1

以下通过CSS Editor添加的CSS将满足您的需求。

@media screen and (max-width: 640px) {
  #new-gallery-1 .Index-gallery-inner {
    display: flex;
    flex-direction: column;
  }
  #new-gallery-1 .Index-gallery-item:nth-child(2) {
    order: -1;
  }
  #new-gallery-2 .Index-gallery-inner {
    display: flex;
    flex-direction: column;
  }
  #new-gallery-2 .Index-gallery-item:nth-child(2) {
    order: -1;
  }
}

或者，如果您更喜欢LESS CSS，则为前缀版本：

@media screen and (max-width: 640px) {
  #new-gallery-1, #new-gallery-2 {
    .Index-gallery-inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .Index-gallery-item:nth-child(2) {
      -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
      order: -1;
    }
  }
}

仅使用上述片段之一。他们要做的是使用flexbox来调整宽度小于640px的元素的显示顺序。

请注意，这是通过使用id定位各节来完成的，这些节是使用索引页的URL设置的。因此，如果将Squarespace后端的索引页的URL更改为new-gallery-1和new-gallery-2之外的其他内容，则必须更新CSS。类似地，如果添加更多部分，则d想要将它们添加到CSS。