Question

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

现在，呈现的页面看起来像这样，但是块A后面应该是块B，然后是块C.

使用flexbox的答案会很棒。

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

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

Answer 1

使用flexbox，您不再需要使用浮动。实际上，floats don't work in a flex container。

您可以使用弹性属性来调整，对齐和重新排列项目。

.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?

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

1 个答案:

jsFiddle