如何在維護 SEO 的同時響應式地重新排序 Flexbox 元素？

為響應式DOM 版面配置自訂Flexbox 順序

問題：

如何在保持搜尋的同時使用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 示範

以上是如何在維護 SEO 的同時響應式地重新排序 Flexbox 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！