Squarespace移动端区块内容顺序颠倒问题求助

你的问题根源在于使用了动态生成的YUI ID（#yui_3_17_2_1_1727035450177_100），这类ID是Squarespace临时生成的，页面刷新、编辑站点后都会变化，导致CSS选择器完全失效。下面是稳定的修复方案：

步骤1：给区块添加稳定的自定义标识 #

1. 打开Squarespace站点编辑器，找到包含「THE PROBLEM」和「THE SOLUTION」的父级区块（通常是Section或Grid容器）
2. 编辑该父区块，在「设置」中添加自定义ID，比如 problem-solution-container
3. 分别编辑「THE SOLUTION」区块，添加自定义类 solution-section；编辑「THE PROBLEM」区块，添加自定义类 problem-section

步骤2：添加有效的自定义CSS #

在站点后台的「设计」→「自定义CSS」中替换原有代码，添加以下内容：

@media (max-width: 600px) {
  #problem-solution-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 保持区块原有间距，可根据需求调整数值 */
  }
  .solution-section {
    order: 2; /* 让SOLUTION区块排在后面 */
  }
  .problem-section {
    order: 1; /* 让PROBLEM区块排在前面 */
  }
}

替代简化方案 #

如果父容器内只有这两个区块，也可以直接用column-reverse快速反转顺序：

@media (max-width: 600px) {
  #problem-solution-container {
    display: flex;
    flex-direction: column-reverse !important;
    gap: 2rem;
  }
}

验证效果 #

保存CSS后，切换到移动端预览模式，刷新页面即可看到区块顺序恢复正常。

内容的提问来源于stack exchange，提问作者Tendekai Muchenje