在 Squarespace 上交换移动视图的文本块顺序

Question

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

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

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

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

为了解决这个问题，移动设备上的块需要从右到左阅读，这样块 1 就会出现在块 2 之前（即使块 1 在桌面版页面的右侧）。希望这是有道理的？

如果有人能帮助我，我将永远感激不已！

提前非常感谢您，模拟

Answer 1

将此 class 添加到您的 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 with 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 文件

Answer 2

西蒙娜，试试看！告诉我你的想法！

http://jsfiddle.net/rickydam/m46de34a/2/

如果您愿意，我可以修改此代码以与您的网站一起使用！

这是该示例中最重要的代码。

@media screen and (max-width: 767px) {
  .rowname {
    display: flex;
    flex-direction: column-reverse;
  }
}

在 Squarespace 上交换移动视图的文本块顺序

Swap text block order for mobile view on Squarespace

css

mobile

position

block

squarespace