How to combine flexbox order and nth-child(odd)

Question

I have 5 divs, every second div should have a different colour than the others.

<div class="element element1">Element1</div>
<div class="element element2">Element2</div>
<div class="element element3">Element3</div>
<div class="element element4">Element4</div>
<div class="element element5">Element5</div>

In my CSS I have

.element {
 background-color: grey;
}

.element:nth-child(odd) {
 background-color: pink;
}

Now dynamically the order of those elements will change, which I want to do with flexbox. Meaning my CSS looks like this then:

.element {
 background-color: grey;
 display:flex;
}

.element5 {
 order: 1;
}

.element2 {
 order: 2;
}

As flexbox is not changing the DOM, the nth-child(odd) will still style every second DOM Element, which is not the order the user will see. But that's what I want. Every second element the users sees should have a different colour, even if the element changes the order with flexbox. Has anyone an idea how this could work? I can only use CSS or HTML for this, no JavaScript or PHP.

Solution

Assuming the layout is always going to be as you put it above.

First You need to set display flex in a container, not in the elements.

Second, if you set Element 5|2 to order 1|2 respectively they will always be at the end as default order is 0(zero).

so you end with | assume bold is odd new colour

ORIGINAL ORDER(DOM): 1 2 3 4 5

FLEX ORDER: 1 3 4 5 2

.flex-container {
  /*SET DISPLAY FLEX ON CONTAINER*/ 
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
/*SET THE NEW ORDER*/
.element:nth-of-type(2){ order: 2;}
.element:nth-of-type(5) { order: 1; }

/*PRESENTATION PROPOUSES ONLY*/
.element,
.normal{
  background: grey;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 5px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

/* TARGET NEW ODD ELEMENTS*/
.element:nth-of-type(1),
.element:nth-of-type(2),
.element:nth-of-type(4){
  background: pink;
}

/* TARGET ORIGINAL ORDER*/
.normal:nth-child(odd){
background: pink;
}

<h1>FLEX ORDER</h1>
<div class="flex-container">
  <div class="element element1">1</div>
  <div class="element element2">2</div>
  <div class="element element3">3</div>
  <div class="element element4">4</div>
  <div class="element element5">5</div>
</div>
<h1>ORIGINAL ORDER</h1>
<div class="flex-container">
  <div class="normal">1</div>
  <div class="normal">2</div>
  <div class="normal">3</div>
  <div class="normal">4</div>
  <div class="normal">5</div>
</div>

If you were to use the Flex & Order only in certain device.Let's say you want default order(12345) in mobile and flex + order(13452) from tablet up you can have @media queries leaving the default(ORIGINAL ORDER) to change colours with nth-child(odd) and then for other devices inside media queries add the above code(FLEX ORDER).

Thanks.