Changing order of floated and non-floated elements with flexbox

Question

I would like to change the order of floated and not-floated elements (floating is altered by media-query).

Now, the rendered page looks like this, but Block A should be followed by Block B and then Block C.

An answer using flexbox would be great.

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>

Here's the fiddle: https://jsfiddle.net/mqfcz46z/4/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ it can easily be handld via flex. ... to modify order, use `order` ! see answer below — G-Cyrillus, Jul 24 '17 at 17:54

score 3 · Accepted Answer · answered Jul 24 '17 at 17:51

With flexbox you don't need to use floats anymore. In fact, floats don't work in a flex container.

You can use flex properties to size, align and re-arrange your items.

.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

Learn more about the order property here: Is there a “previous sibling” CSS selector?

Changing order of floated and non-floated elements with flexbox

1 Answers1

jsFiddle