使用CSS重新排列Squarespace元素

Question

如何更改Squarespace中照片和文字的顺序，使其在台式机上以一种方式查看，但在移动设备上重新排序？我已经看到了与此类似的问题，所以我尝试了自己的代码，但没有任何改变。

我有索引页来平衡桌面上其上方的页面的布局（section1 =左侧的图像/右侧的文本，section2 =左侧的文本/右侧的图像）

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

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

Answer 1

您可以通过两种方式使用flexbox。如果您要查找的是Flexbox，则可以使用reverse the order（这是我对所写内容的理解）。或者，您也可以使用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表。就您而言，这需要较少的代码，并且将具有更广泛的兼容性。不过，Flexbox是另一种实现方式。

对于其他可能阅读此书的人，您可能需要针对您的特定站点/上下文提出一个新问题（并确保提及您尝试过的代码）。