Question

我在页面上有几个助手，不能让它们表现出我所期望的那样。有问题的代码大致如下：

<aside>Table of Contents</aside>
<section>Content</section>
<aside>Related Content</aside>

在薄屏幕上（例如我的手机），这完全符合我的期望。第一个显示在内容的正上方，中间显示在内容中，最后一个显示在下方。但是，在更宽的屏幕上，它的工作效果不尽如人意。第一个（ToC）位于内容的左侧，第二个位于右侧。理想情况下，我希望两者都出现在右侧，而它们仍然与在移动设备上一样。任何帮助都会很棒。

Answer 1

由于您未指定，因此我称桌面大小大于600px。这是任意的。使用flexbox排序，我将第一个子插槽中的section拉到两个边之前。

来自MDN：

订单 CSS属性可设置在Flex或网格容器。容器中的项目按order升序排序值，然后按其源代码顺序排序。

此演示最好在整页模式下观看。

aside, section {
  border: 1px solid red;
}

@media screen and (min-width: 600px) {
   body {
     display: flex;     
   }
   
   section {
     order: -1;
   }
}

<aside>Table of Contents</aside>
<section>Content</section>
<aside>Related Content</aside>

jsFiddle

Answer 2

我认为您在那里需要一个网格，因为您要在流程上进行重新排序，我想您希望两个边都在另一个下面，对吗？

类似的东西：

@media (screen and min-width: some_width_bigger_than_mobile) {
  #container {
    display: grid;
    grid-template-columns: 1fr some_width_for_the_asides;
  }

  section {
    grid-columns: 1;
    grid-rows: 1 / span 2;
  }

  aside {
    grid-column: 2;
  }
}

HTML辅助功能-指定一面

2 个答案: