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

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.

Answer 1

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.

Answer 2

My solution:
div {
display: flex;
flex-direction: column;
}
div > div {
order: 1;
background-color: #868d95;
}
div > div:nth-child(odd) {
background-color: #a7acb2;
}
div > div.active {
order: 0;
background-color: #20c36d;
}
div > div.active ~ div {
background-color: #a7acb2;
}
div > div.active ~ div:nth-child(odd) {
background-color: #868d95;
}
<div>
<div>1</div>
<div>2</div>
<div class="active">3</div>
<div>4</div>
<div>5</div>
<div>7</div>
<div>8</div>
</div>
scss:
div {
display: flex;
flex-direction: column;
& > div {
order: 1;
background-color: #868d95;
&:nth-child(odd) {
background-color: #a7acb2;
}
&.active {
order: 0;
background-color: #20c36d;
& ~ div {
background-color: #a7acb2;
&:nth-child(odd) {
background-color: #868d95;
}
}
}
}
}