How do arrange divs into two rows of three columns, separated by even vs odd children?

Question

I have a parent div with 6 children divs as follows

<div class="work-wrap">
   <div class="work-item">1</div>
   <div class="work-item">2</div>
   <div class="work-item">3</div>
   <div class="work-item">4</div>
   <div class="work-item">5</div>
   <div class="work-item">6</div>
</div>

I want to have a result like this

2 4 6

1 3 5

Answer 1

您可以使用flexbox并更改:nth-child(odd)项目的顺序：

.work-wrap {
  display: flex;
  flex-wrap: wrap;
}

.work-item {
  width: 33%;
}

.work-item:nth-child(odd) {
  order: 1;
}

<div class="work-wrap">
  <div class="work-item">1</div>
  <div class="work-item">2</div>
  <div class="work-item">3</div>
  <div class="work-item">4</div>
  <div class="work-item">5</div>
  <div class="work-item">6</div>
</div>