需要帮助使用 CSS 重新排序 Squarespace 中的一些块

问题描述

第一次在这里发帖，潜伏了一段时间。

我一直在帮助我的妻子建立她的网站，因为她正在开始一些自由职业服务，但我们遇到了一个问题，我花了很多时间试图解决但失败了。

我尝试过，我不知道有多少分类调用 .row .sqs-row .col 等组合，但无法更改网站移动视图中块的顺序。

网站网址：https://yosyvelasquez.com pass:yosydesign2021

而在桌面侧边会显示一系列的步骤为：

1 2 3 4 5 6

desktop view

但是在移动视图中它显示 1 4 2 5 3 6

mobile view1 mobile view2

我尝试的最后一件事是：

@media screen and (max-width:640px) {
 div#page-section-60482408b332ea04661c1cf0> .row .sqs-row {
    display: flex;
  flex-direction: column;
   
   
  }
 #block-25053f13e7adbb1c828d{order:2 !important;}
}

但它不起作用，我已经多次更改代码。我知道我需要将显示设置为 flex 以便我可以使用 order 命令，但它似乎不起作用。

我非常感谢能得到的任何帮助和指导，因为我是 CSS 的新手。

解决方法

从 this link 复制该网格部分的代码后。 HTML 中的顺序不是按顺序排列的。 04 容器紧跟在第一个之后，而 05 在第二个之后。我看到这就是您（或 Squarespace）在“网格”类型布局中制作列的方式。在 HTML 中将元素按正确顺序排列后，一切都按预期进行。

如果您想在 HTML 中保持相同的乱序顺序，那么您可以使用 order 来确保项目按升序排列。请记住以下几点：

使用 order 属性会在内容的视觉呈现和 DOM 顺序之间造成脱节。这将对借助屏幕阅读器等辅助技术进行低视力导航的用户产生不利影响。如果视觉 (css) 顺序很重要，那么屏幕阅读器用户将无法访问正确的阅读顺序。

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex div {
  margin: 1rem;
}

.one {
  order: 1;
}

.two {
  order: 2;
}

.three {
  order: 3;
}

.four {
  order: 4;
}

.five {
  order: 5;
}

.six {
  order: 6;
}

<div class="flex">
  <div class="one">
    <h2>01</h2>
    <h3>Obtén una cotización</h3>
    <p>some text</p>
  </div>
  <div class="four">
    <h2>04</h2>
    <h3>Desarrollo de Proyecto</h3>
    <p>some text</p>
  </div>
  <div class="two">
    <h2>02</h2>
    <h3>Agenda tu proyecto
</h3>
    <p>some text</p>
  </div>
  <div class="five">
    <h2>05</h2>
    <h3>Revisiones</h3>
    <p>some text</p>
  </div>
  <div class="three">
    <h2>03</h2>
    <h3>Inicio de Proyecto</h3>
    <p>some text</p>
  </div>
  <div class="six">
    <h2>06</h2>
    <h3>Finalización de Proyecto</h3>
    <p>some text</p>
  </div>
</div>

如果您想添加一些自己的样式，我建议您使用 CSS Grid 并按照升序正确排列 HTML 元素，以便那些依赖辅助技术来查看网站的人。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
  gap: 1.5rem;
  margin: 1rem auto;
  max-width: 110ch;
}

.grid div {
  text-align: center;
}

<div class="grid">
  <div>
    <h2>01</h2>
    <h3>Obtén una cotización</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>02</h2>
    <h3>Agenda tu proyecto
</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>03</h2>
    <h3>Inicio de Proyecto</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>04</h2>
    <h3>Desarrollo de Proyecto</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>05</h2>
    <h3>Revisiones</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>06</h2>
    <h3>Finalización de Proyecto</h3>
    <p>some text</p>
  </div>
</div>