css - 在 Squarespace 上交换移动 View 的文本 block 顺序

Question

我已经在 Squarespace 上问过这个问题，但得到的帮助是零，我变得绝望了(悲伤的脸)。所以我希望这里的人可以更友好一点 :D

我想知道是否有人愿意(非常感谢)为我编写类似于 Aarnaa 在 link here 中获得的代码的代码.我没有代码方面的经验，近一个星期以来我一直在尽最大努力将一些东西混合在一起，但不幸的是没有成功!

我正在为一家阿曼妇女慈善机构创建一个网站，该网站的一部分需要使用阿拉伯语，并且阿拉伯语从右到左阅读。我遇到的问题是文本 block 也必须从右到左阅读。这在桌面上看起来不错，但是当我在移动设备上查看页面(下面的链接)时，它会将它堆叠起来并以一种不再有意义的方式对其进行排序 (2,1,4,3,6,5)。

https://sim-zuk-7r39.squarespace.com/our-objectives-a/

为解决此问题，移动设备上的 block 需要从右到左读取，以便 block 1 出现在 block 2 之前(即使 block 1 在桌面版页面的右侧)。希望这是有道理的？

如果有人能帮助我，我将永远感激不尽!

非常感谢您， 辛

Answer 1

将这个类添加到你的 CSS 中......

[class*=sqs-col] {
    float: right !important;
}

然后在 html 中像这样更改顺序

<div class="col sqs-col-4 span-4">...... 2.....</div>
<div class="col sqs-col-4 span-4">...... 1.....</div>

到

<div class="col sqs-col-4 span-4">...... 1.....</div>
<div class="col sqs-col-4 span-4">...... 2.....</div>

---

如果您只能访问 css，您可以尝试 flexbox与 media query

@media  (max-width: 600px) {
    div#yui_3_17_2_1_1497969035108_70 .sqs-row{
      display: flex !important;
      flex-direction: column-reverse !important;
    }

}

将其添加到您的 css 文件中