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/

Answer 1

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?