Question

尝试在小屏幕的内容文本顶部放置侧边栏。

我尝试的方法无效。

@media(max-width: 820px) {
  .head {
    display: -webkit-box;
  }

  .text > .sidebar {
    -ms-flex-order: 1;
  }

<div class='container'>
      <div class='head'>
      <aside class='sidebar'>
      </aside>
     </div>

Answer 1

使用flex，您可以将flex-direction更改为column，然后根据需要更改flex项目的order。

您还可以结合使用grid和grid-template-areas来设置和重新排列网格单元格的顺序。例如，结合@media

...
grid-template-areas:
  "content"
  "header";
...

@media (max-width: 500px) {
  ...
  grid-template-areas:
    "header"
    "content";
  ...
}

Answer 2

您遇到许多问题：

错误的<body>标记（只需将其删除）。
一个永远不会与目标元素匹配的选择器（.text > .sidebar。
实际上，您不需要.sidebar上的任何样式，所以我也只是删除了这个。
逻辑错误-.head不包含order；我假设您希望在移动视图中将此放在 .sidebar以下，这意味着 .head 需要order: 2（不是{{ 1}}）。

所有这些问题都得到纠正后，您只需提供.sidebar .container和display: flex，交换将按预期进行。

这可以在以下（简化的）示例中看到：

flex-direction: column

@media(max-width: 820px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .head {
    order: 2;
  }
}