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

Question

第一次发帖，潜伏了一段时间

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

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

站点 URL：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 以便我可以使用命令命令它似乎不起作用。

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

Answer 1

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

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

Using the order property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

.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>

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

Need help using CSS to reorder some blocks in Squarespace

css

squarespace

bootstrap-4