更改移动和桌面布局的列顺序

Question

下图显示了我当前的布局，其中容器 1 和 3 的高度由中间列确定。在我的移动视图中，我希望容器彼此堆叠，即 1、2、3、4。但是，按照我目前的方法，我有 1,2,4,3

<div class="wrapper">
    <div class="aside aside-1">
        <h2>container 1</h2>    
    </div>
    <div class="main">
        <div class="inner-content first">
            <h2>container 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
        </div>
        <div class="inner-content last">
            <h2>container 4</h2>
        </div>
    </div>
    <div class="aside aside-2">
        <h2>container 3</h2>
    </div>
</div>


.wrapper {
    display: flex;  
    flex-flow: row wrap;
}

.wrapper > * {
    flex: 1 100%;
    margin: 20px 0;
}

.main {
    margin-right: 20px;
    margin-left: 20px;
    .inner-content {
        background: yellow;
        padding: 10px;
        &.first {
            margin-bottom: 20px;
        }
    }
}


.aside-1, .aside-2  {
    background: yellow;
    padding: 10px;
}

@media all and (min-width: 600px) {
    .aside { flex: 1 0 0; }
}

@media all and (min-width: 800px) {
    .main    { flex: 1 0px; }
    .aside-1 { order: 1; } 
    .main    { order: 2; }
    .aside-2 { order: 3; }
    .footer  { order: 4; }
}

这是demonstrate问题的链接

Answer 1

显示：内容；

使用您的实际标记，解决方案之一是在 .main div 上使用 display: contents;。

这些元素本身不会产生特定的框。它们被它们的伪盒子和它们的子盒子所取代。请注意，CSS Display Level 3 规范定义了内容值应如何影响“不寻常的元素”——不是纯粹由 CSS 框概念呈现的元素，例如替换元素。

Source: MDN.

两个注意事项：

• 它可能会从可访问性树中删除内容
• IE 不支持

片段如下：

.wrapper {
    display: flex;  
    flex-flow: row wrap;
  }
  
  .wrapper > * {
    flex: 1 100%;
    margin: 20px 0;
  }

.main {
  margin-right: 20px;
  margin-left: 20px;
  display: contents;

  .inner-content {
    background: yellow;
    padding: 10px;

    &.first {
      margin-bottom: 20px;
    }
  }
}


.aside-1,
.aside-2 {
  background: yellow;
  padding: 10px;
}

.last {
  order: 2;
}

.aside-2, .last {
  width: 100%;
 margin: 20px 0;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 0 0;
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 1 0px;
    display: block;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

  .last {
    width: auto;
  }
}

<div class="wrapper">
  <div class="aside aside-1">
    <h2>container 1</h2>    
  </div>
  <div class="main">
    <div class="inner-content first">
      <h2>container 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
    </div>
    <div class="inner-content last">
      <h2>container 4</h2>
    </div>
  </div>
  <div class="aside aside-2">
    <h2>container 3</h2>
  </div>
</div>

支持：

Table of support on Can I Use

---

css 网格

通过更改您的实际标记并使用网格，您可以获得更简单的解决方案。

有很多方法可以做到这一点，我会根据页面内容的重要性调整HTML markup。

一种解决方案是为子级创建一个包装器，如下所示：内容 1、内容 2、内容 3、内容 4。
在移动设备上，您可以保留初始盒子模型display: block;，并仅在您的媒体查询中进行调整。

片段如下：

.wrapper > div {
  background: yellow;
  padding: 10px;
  margin-bottom: 20px;
}

@media all and (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px 20px;
    grid-template-areas:
      "aside-1 first aside-2"
      "aside-1 last aside-2";
  }  
  
  .aside-2 { grid-area: aside-2; }
  .aside-1 { grid-area: aside-1; }
  .first { grid-area: first; }
  .last { grid-area: last; }  

  .wrapper > div {
    margin-bottom: 0;
  }
}

<div class="wrapper">
  <div class="aside-1">
    <h2>container 1</h2>    
  </div>
  <div class="first">
    <h2>container 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
  </div>
  <div class="aside-2">
    <h2>container 3</h2>
  </div>
  <div class="last">
    <h2>container 4</h2>
  </div>  
</div>

标记和样式比您的初始代码更简单：更少的 div 和更少的规则。

Table of support on Can I Use

不要忘记在使用网格时为规则添加前缀。