Squarespace 部分内容发生反转，并且移动视图中的顺序发生变化

Question

我正在建设一个网站

https://azalea-fiddle-5ha9.squarespace.com/

密码：USTAX2024

在桌面上，我的网站没问题，但当我在移动设备上查看时，标题“解决方案”的部分出现在“问题”之前。情况不应该如此。在桌面网站上，顺序很好，但在移动设备上，顺序却发生了变化。我该如何解决这个问题？

这是我尝试添加为自定义 CSS 的内容，但无济于事：

@media (max-width: 600px) {
    #yui_3_17_2_1_1727035450177_100 {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}

Answer 1

此时，flex-direction：column-reverse将不是最佳解决方案，因为有更多的项目，而只有这两个项目。

所以我会更喜欢

    @media(max-width: 600px)
    {
        #yui_3_17_2_1_1727040381650_100
        {
            display: flex;
            flex-direction: column;
        }

        #yui_3_17_2_1_1727040381650_100 > *
        {
            /* preserver rest of childrens after title and subtitle */
            order: 3; 
        }

        /* make title first */
        #yui_3_17_2_1_1727040381650_100 > .fe-block.fe-block-yui_3_17_2_1_1725215880094_16619
        {
            order: 1;
        }

        /* make subtitle second */
        #yui_3_17_2_1_1727040381650_100 > .fe-block.fe-block-41801accd87d47bcbe09
        {
            order: 2;
        }
    }