How can I shuffle items to each other. Just using CSS-CodePudding

I am trying to shuffle 1st item with 2nd item, 3rd item with 4th item and 5th item with 6th item...and so on.

Condition : Items are not fixed. It can be more than 6.

Existing scenario enter image description here

Expected Result enter image description here

CodePudding user response：

If your items have the same height (as on your picture), you might shift even items upwards, odd ones downwards, and here you are:

li {
  border: solid 1px;
  margin: .25em 0;
  background: #6df;
}

li:nth-child(odd) {
  transform: translateY(calc(100%   .25em));
}

li:nth-child(even) {
  transform: translateY(calc(-100% - .25em));
}

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

CodePudding user response：

I use a great (free) tool called flexboxgrid. This has the exact feature you are looking for. http://flexboxgrid.com/

It allows you to create a "container" with many "rows" and then you can order them how you see fit.