如何在维护 SEO 的同时响应式地重新排序 Flexbox 元素？

为响应式 DOM 布局自定义 Flexbox 顺序

问题：

如何在保持搜索的同时使用 Flexbox 重新排序 div没有重复元素的引擎优化结构？

答案：

虽然单独的 CSS 无法完全完成此任务，但可以使用混合方法。

具有静态高度的 Flexbox：

您可以利用 Flexbox 和固定高度来排序 div：

<code class="css">.flex {
  height: 90vh;
  display: flex;
  flex-flow: column wrap;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

这将垂直堆叠元素并将第二个 div 放置在底部。

用于响应行为的媒体查询：

使用媒体查询来处理不同的屏幕尺寸：

<code class="css">@media (max-width:768px) {
  .flex div:nth-child(2) {
    order: 0;
  }
}</code>

在较小的屏幕上，第二个 div 将再次位于顶部。

样式：

<code class="css">.flex-child {
  font-size: 2em;
  font-weight: bold;
}
.flex-child:nth-child(1) {
  background: #e6007e;
}
.flex-child:nth-child(2) {
  background: #f4997c;
}
.flex-child:nth-child(3) {
  background: #86c06b;
}</code>

演示：

请参阅此 CodePen 以了解工作原理示例：CODEPEN 演示

以上是如何在维护 SEO 的同时响应式地重新排序 Flexbox 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！