即使内容中有全角块，如何使边栏出现在移动内容之后？

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