html - 在较小屏幕上的其他元素之间移动侧边栏

Question

我不完全确定这是可能的，但我想我会问。

我想在遇到断点时在某些内容之间移动侧边栏。

所以，例如这样的事情：

+---------------------+ +-------------+
|                     | |             |
|    Top Content      | |             |
|                     | |  Sidebar    |
|                     | |             |
+---------------------+ |             |
+---------------------+ |             |
|                     | |             |
|                     | |             |
|                     | |             |
|     Other           | |             |
|     Content         | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
+---------------------+ +-------------+

对此：

  +-------------------------+
  |                         |
  |        Top Content      |
  |                         |
  +-------------------------+
  +-------------------------+
  |                         |
  |                         |
  |     Sidebar             |
  |                         |
  |                         |
  |                         |
  +-------------------------+
  +-------------------------+
  |                         |
  |                         |
  |                         |
  |                         |
  |       Other             |
  |       Content           |
  |                         |
  |                         |
  |                         |
  |                         |
  +-------------------------+

所以我知道我可以设置订单，但我不太确定如何正确设置“流程”。

我想知道这样的事情：

.flex-container {
  display: flex;
  flex-direction: row;
}

.top-content {
  order: 1;
}

.sidebar {
  order: 3;
  justify-self: flex-end;
}

.other-content {
  order: 2;
}

@media screen and (max-width: 767px) {
  .flex-container {
    flex-direction: column;
  }
  .sidebar {
    order: 2;
  }
  .other-content {
    order: 3;
  }
}

<div class="flex-container">
  <div class="top-content">
    ...
  </div>
  <div class="sidebar">
    ...
  </div>
  <div class="other-content">
    ...
  </div>
</div>

但我不确定这是否合理？想知道这是否需要用 CSS Grid 来代替？无论如何，只是一个想法。希望使用相同的内容结构，而不必使用断点隐藏/显示相同的内容并在页面上编写更多标记。

标签： htmlcssflexboxcss-grid

Answer 1

使用 CSS Grid 更简单、更容易。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 3fr;
  grid-gap: .5em;
  height: 100vh;
  background-color: gray;
}

.top-content {
  grid-column: 1;
  background-color: orangered;
  border: 1px dashed black;
}

.sidebar {
  grid-column: 2;
  grid-row: 1 / -1;
  background-color: aqua;
  border: 1px solid black;
}

.other-content {
  grid-column: 1;
  background-color: lightgreen;
  border: 1px dashed black;
}

body {
  margin: 0;
}

@media (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .sidebar {
    grid-column: 1;
    grid-row: 2;
  }
}

<div class="grid-container">
  <div class="top-content">top content</div>
  <div class="sidebar">sidebar</div>
  <div class="other-content">other content</div>
</div>

jsFiddle 演示