即使內容中有全角塊，如何使邊欄出現在移動內容之后？

Question

我嘗試將固定寬度內容和側邊欄包裝在共享容器中，但對於移動設備，只能想到一種解決方案，將側邊欄放在內容之后和全角內容之前。 后期是不可取的。

理想的結果

我正在嘗試的Codepen

<div class="everything">
  <div class="container">
    <div class="content">content</div>
    <div class="sidebar">sidebar should be the last one on mobile</div>
  </div>
  <div class="full-width-container">full-width-container</div>
</div>

Answer 1

有一些可能的解決方案可以解決此設計難題，但最突出的解決方案是使用flexbox。 這是flexbox的絕佳指南（ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ），但是對您有利的特定屬性是order屬性。

您可以將所有項目放在flex容器中，並且您在模擬中顯示的每個項目都是flex-items（flex容器的子項）。 然后，您將正常在桌面上設置彈性項目的order屬性。

flex-item1 { order: 1; }
flex-item-sidebar { order: 2; }
flex-item3 { order: 3; }
flex-item4 { order: 4; }

這不是超級必要的，因為彈性項目按源順序排列。 但是，對於您的移動CSS，您將按以下方式設置順序：

flex-item1 { order: 1; }
flex-item-sidebar { order: 3; } // note this change
flex-item3 { order: 2; }
flex-item4 { order: 4; }

order屬性控制它們在flex容器中出現的順序，因此您可以使用CSS更改順序，並使用最小和最大寬度來更改不同的屏幕尺寸！

在我提供的鏈接中，還有一些很棒的布局示例，您可能會抓住它們並嘗試使用它們以滿足您的需求（ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ＃flexbox-examples ）。

編輯：這是我在Codepen中快速完成的操作，應該對您有用。 調整屏幕大小以查看實際效果。 https://codepen.io/anon/pen/vZQWXw#anon-login