使用 flexbox 更改浮动和非浮动元素的顺序

Question

我想更改浮动和非浮动元素的顺序（浮动由媒体查询更改）。

现在，渲染的页面是这样的，但是 Block A 后面应该是 Block B，然后是 Block C。

使用 flexbox 的答案会很棒。

section.one {
  box-sizing: border-box;
  width: 48%;
  margin-right: 2%;
  column-count: 1;
  float: left;
}

section.two {
  box-sizing: border-box;
  width: 48%;
  margin-left: 2%;
  column-count: 1;
  float: left;
}

.block {
  background-color: red;
  width: 100%;
  height: 200px;
  clear: both;
  padding: 1em 0;
}

.block h2 {
  text-align: center;
}

@media (max-width:500px) {
  section.one,
  section.two {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

<article>

  <div class="content">
    <h1 class="heading">Heading</h1>
    <section class="one">
      <h2>Block B</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo doloreslita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </section>
    <section class="two">
      <h2>Block C</h2>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
        erat, sed diam voluptua. At vero eos et accusam et justo duo dolores rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </section>
    <div class="block">
      <h2>
        Block A
      </h2>
    </div>
  </div>
</article>

这是小提琴：https://jsfiddle.net/mqfcz46z/4/

Answer 1

有了 flexbox，你就不再需要使用浮动了。其实floats don't work in a flex container。

您可以使用 flex 属性来调整大小、对齐和重新排列您的项目。

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section.one {
  flex: 0 0 48%;
}

section.two {
  flex: 0 0 48%;
}

.block {
  flex: 0 0 100%;
  height: 200px;
  background-color: red;
}

.block h2 {
  text-align: center;
}

@media (max-width:500px) {
  section.one { order: 2; }
  section.two { order: 1; }
  .block      { order: 0; }
}

<article>
  <h1 class="heading">Heading</h1>
  <div class="content">
    <section class="one">
      <h2>Block B</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo doloreslita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </section>
    <section class="two">
      <h2>Block C</h2>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
        erat, sed diam voluptua. At vero eos et accusam et justo duo dolores rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </section>
    <div class="block">
      <h2>Block A</h2>
    </div>
  </div>
</article>

jsFiddle

在此处了解有关order 属性的更多信息：Is there a “previous sibling” CSS selector?