<p>
  <code>.three { order: -1; }</code>
</p>
<div class="container container-1">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
  <div class="item seven">7</div>
  <div class="item eight">8</div>
</div>
<hr>
<p>
  <code>.three { order: -1; }</code>
  <br>
  <code>.five { order: -2; }</code>
</p>
<div class="container container-2">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
  <div class="item seven">7</div>
  <div class="item eight">8</div>
</div>
<hr>
<p>
  <code>.three { order: 7; }</code>
</p>
<div class="container container-3">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
  <div class="item seven">7</div>
  <div class="item eight">8</div>
</div>
<hr>
<p>
  <code>.three { order: 1; }</code>
  <code>/* since all items are order: 0; the item with #3 will be put after them. */</code>
</p>
<div class="container container-4">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
  <div class="item seven">7</div>
  <div class="item eight">8</div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0 auto;
  max-width: 800px;
}

p {
  font-size: 1.5em;
  font-weight: bold;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 20px auto;
  width: 100%;
  padding: 20px;
  -webkit-display: -webkit-box;
  -webkit-display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background-color: #594255;
}

.item {
  background-color: #fff;
  width: 100px;
  height: 100px;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
}

.three {
  background-color: #E18D87;
}

.container-1 .three,
.container-2 .three {
  -webkit-order: -1;
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.container-2 .five {
  background-color: orange;
  -webkit-order: -2;
  -webkit-box-ordinal-group: -1;
  -ms-flex-order: -2;
  order: -2;
}

.container-3 .three {
  -webkit-order: 7;
  -webkit-box-ordinal-group: 8;
  -ms-flex-order: 7;
  order: 7;
}

.container-4 .three {
  -webkit-order: 1;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}