<div class="wrap">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="some-class"></div>
    <div class="anything"></div>
    <div class="bla-bla"></div>
</div>
<div class="wrap">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="some-class"></div>
    <div class="anything"></div>
    <div class="bla-bla"></div>
</div>
<div class="wrap">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="some-class"></div>
    <div class="anything"></div>
    <div class="bla-bla"></div>
</div>
.wrap {
  width: 600px;
  display: flex;
}
.wrap > * {
  width: 50px;
  height: 50px;
  background: #444;
  margin: 10px;
}
.wrap .item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: green;
  order: 2;
  color: #fff;
}
.wrap .item ~ .item {
  background: red;
  order: 1;
}
.wrap div:not(.item) {
  order: 3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.