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

Question

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

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

我有索引画廊页面，可以交替使用图像布局（对于全出血，我有两张并排的图像，其中一张是文字）。我已经更改了桌面上的顺序，因此 section1 = 左边是图片，右边是带文字的图片，section2 = 左边是带文字的图片，右边是图片（总共 4 个部分）。

在移动视图中，流程正在堆叠图像，所以我得到 image/image 和 text/image 以及文本/image/image。

是否可以更改每个部分的查看顺序？

网页是：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。同样，如果您添加更多部分，您希望将它们添加到 CSS.

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

Reordering Squarespace Index Image Blocks with CSS?

squarespace