html - 即使内容中有全 Angular block ，如何使侧边栏出现在移动内容之后？

Question

我尝试将固定宽度内容和侧边栏包装在一个共享容器中，但对于移动设备，我只能想到一种解决方案，将侧边栏放在内容之后和全 Angular 内容之前。后者是不可取的。

Desirable result

The codepen I am trying to get working

<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 容器中，您在模拟中显示的每一 block 都将是 flex 元素( flex 容器的子项)。然后，您将在桌面上正常设置 flex 元素的顺序属性。

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

这不是非常必要，因为 flex 元素是按源代码顺序排列的。但是，对于您的移动 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