Question

我已经在Squarespace上问了这个问题，但是收到了ZERO的帮助，我感到绝望（悲伤的表情）。所以我希望这里的人可能会更友好一点：D

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

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

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

为了解决这个问题，移动设备上的块需要从右到左读取，以便块1在块2之前出现（即使块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文件

Answer 2

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

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

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

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

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

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

2 个答案: