Can you specify the order of wrapped elements in CSS flex?

Question

I have a <div> that uses CSS flex to keep it responsive.

I am looking for a way to specify the order that elements are wrapped in.

For example, I need

1 - 2 - 3

To become

1
3
2

When fully wrapped.

Current code: https://jsfiddle.net/g0L44e5b/

Is this possible?

Answer 1

yes you can , use order property:

body {
  display:flex;
  flex-flow:column;
  }
p:last-child{
  order:1;
  }
p:nth-child(2) {
  order:2;
    }

<p>1</p>
<p>2</p>
<p>3</p>

here is an handy ressource https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

edit after your edit

wrap and mediaquerie can be used :

body {
  display:flex;flex-wrap:wrap;
  }
p {
  flex:1;
  min-width:380px;
  margin:10px;
  border:solid;
}
@media screen and (max-width : 800px) {
p:last-child{
  order:1;
  }
p:nth-child(2) {
  order:2;
    }
}

<p>1</p>
<p>2</p>
<p>3</p>