使用 CSS 对 Squarespace 块重新排序

Question

如何更改 Squarespace 中照片和文本的顺序，使其在桌面上以一种方式查看，但在移动设备上重新排序？我见过与此类似的问题，所以我尝试了自己的代码，但它没有改变任何东西。

我的索引页平衡了桌面上它上方的布局（第 1 部分 = left/text 右侧的图像，第 2 部分 = 右侧 left/image 上的文本）

在移动设备上，流程是向后的（第 1 部分 = 底部 top/text 上的图像，第 2 部分 = 底部 top/image 上的文本）。

网页是：www.northcountryarmory.com/fort-knox

Answer 1

您可以使用 flexbox for this in two ways. Flexbox lets you reverse the order if that's what you're looking for (this is my understanding of what you wrote). Alternatively you can also use flex order 手动更改页面上特定元素的顺序。

Answer 2

这确实是 Squarespace 网站上相当普遍的需求（并且一直是 for years）。不幸的是，Squarespace 目前不提供任何特定于移动设备的块布局选项。

此外，每个站点的布局都非常不同，这使得编写 CSS 的通用位变得困难。视具体情况而定。

在您的情况下，您可以定位特定页面（通过 body 元素上的集合 ID），然后定位每个偶数编号的索引页面部分。请注意，以这种方式定位只会影响该页面，并且只会影响该页面上的索引部分。

通过 CSS Editor / Custom CSS 插入以下 LESS CSS:

@media screen and (max-width: 640px) {
  #collection-5db8b183ea3e1a49745ba89a .Index-page:nth-child(even) {
    .sqs-row {
      display: table;
    }
    .sqs-col-6:last-child {
      display: table-header-group;
    }
  }
}

上面没有使用flexbox，而是使用了CSS tables。在您的情况下，这需要更少的代码并且将更广泛地兼容。不过，Flexbox 是另一种实现方式。要使用 flexbox，请将父元素设置为 display:flex，然后在媒体查询的上下文中对子元素使用 order CSS 属性，类似于上述。

对于可能阅读本文的其他人，您可能需要针对您的特定 site/context 提出一个新问题（并务必提及您尝试过的代码）。

使用 CSS 对 Squarespace 块重新排序

Reordering Squarespace blocks using CSS

css

mobile

element

squarespace