changing the order of flex items

Question

I have a container with multiple divs and am using the flexbox model. I want achieve the following using css, although I cannot change the order of div tags.

In the second row the div with value "8" has to come first.

I have attached the codepen link.

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  // align-items:flex-start;
  align-content: space-around;
  justify-content: flex-start;
}

.item {
  background-color: tomato;
  box-sizing: border-box;
  padding: 20px;
  outline: 2px solid blue;
  flex-basis: 20%;
}

.item-inside {
  display: none;
  background-color: #ABABAB;
  box-sizing: border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis: 80%;
}

.show {
  display: block;
}

.hide {
  display: none;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">8</div>
  <div class="item">7</div>
  <div class="item">6</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">8</div>
  <div class="item">12</div>
</div>

score 2 · Answer 1 · answered May 15 '17 at 21:01

If I understand the end goal, you can use :nth-child() and order to re-order them.

.container {
 position: relative;
 display: flex;
 flex-flow: row wrap;
 // align-items:flex-start;
  align-content: space-around;
  justify-content:flex-start;
  
}

.item {
 background-color: tomato;
 box-sizing: border-box;
 padding: 20px;
 outline: 2px solid blue;
  flex-basis: 20%;
  
}
.item-inside{
  display:none;
  background-color: #ABABAB;
  box-sizing:border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis:80%;
}

.show {
  display:block; 
 
}

.hide {
  display:none;
}

.item:nth-child(-n+5), .item:nth-child(8) {
  order: -1;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

Michael Benjamin · Answer 2 · 2017-05-15T21:11:18.017

Use the CSS order property.

By default, all flex items are set to order: 0.

Elements with the same order value are rendered in the order they appear in the source code.

div.item:nth-child(1)  { order: -1 }
div.item:nth-child(2)  { order: -1 }
div.item:nth-child(3)  { order: -1 }
div.item:nth-child(4)  { order: -1 }
div.item:nth-child(5)  { order: -1 }
div.item:nth-child(6)  { order:  1 }
div.item:nth-child(7)  { order:  1 }
div.item:nth-child(8)  { order:  0 }
div.item:nth-child(9)  { order:  1 }
div.item:nth-child(10) { order:  1 }
div.item:nth-child(11) { order:  1 }
div.item:nth-child(12) { order:  1 }

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  /* align-items:flex-start; */
  align-content: space-around;
  justify-content: flex-start;
}

.item {
  background-color: tomato;
  box-sizing: border-box;
  padding: 20px;
  outline: 2px solid blue;
  flex-basis: 20%;
}

.item-inside {
  display: none;
  background-color: #ABABAB;
  box-sizing: border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis: 80%;
}

.show {
  display: block;
}

.hide {
  display: none;
}

div.item:nth-child(1) {
  order: -1
}

div.item:nth-child(2) {
  order: -1
}

div.item:nth-child(3) {
  order: -1
}

div.item:nth-child(4) {
  order: -1
}

div.item:nth-child(5) {
  order: -1
}

div.item:nth-child(6) {
  order: 1
}

div.item:nth-child(7) {
  order: 1
}

div.item:nth-child(8) {
  order: 0
}

div.item:nth-child(9) {
  order: 1
}

div.item:nth-child(10) {
  order: 1
}

div.item:nth-child(11) {
  order: 1
}

div.item:nth-child(12) {
  order: 1
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

changing the order of flex items

2 Answers2