<div class="controls">
  
  <div class="control_wrapper">
    <label for="orderselect-3">order item-3:</label>
    <select id="orderselect-3">
      <option value="-2">-2</option>
      <option selected value="-1">-1</option>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
  
  <div class="control_wrapper">
    <label for="orderselect-4">order item-4:</label>
    <select id="orderselect-4">
      <option selected value="-2">-2</option>
      <option value="-1">-1</option>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
  
  <div class="control_wrapper">
    <label for="orderselect-5">order item-5:</label>
    <select id="orderselect-5">
      <option value="-2">-2</option>
      <option value="-1">-1</option>
      <option value="0">0</option>
      <option value="1">1</option>
      <option selected value="2">2</option>
    </select>
  </div>
  
  <div class="control_wrapper">
    <label for="orderselect-7">order item-7:</label>
    <select id="orderselect-7">
      <option value="-2">-2</option>
      <option value="-1">-1</option>
      <option value="0">0</option>
      <option selected value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>

</div>

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

html {
  background: #f6faff;
}

/*-- --*/
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 35rem;
}
.item {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  padding: 3rem;
  background: #dfeffd;
  border: 3px solid #457fdc;
  color: #457fdc;
  margin: 6px;
}

.item-3 {
  order: -1;
  background: mistyrose;
  border: 3px solid tomato;
  color: tomato;
}

.item-4 {
  order: -2;
  background: #f1e9f7;
  border: 3px solid #a579cc;
  color: #a579cc;
}

.item-5 {
  order: 2;
  background: #f3edd6;
  border: 3px solid #b59214;
  color: #b59214;
}

.item-7 {
  order: 1;
  background: #e2f0ef;
  border: 3px solid #51aaa3;
  color: #51aaa3;
}

.controls {
  padding: 30px 6px;
  font-size: 1.2rem;
  color: #2f4f4f;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.controls select {
  color: #2f4f4f;
  margin-right: 4px;
}

.control_wrapper {
  margin: 0 20px 10px 0;
}

$(document).ready(function(){
  
  $("#orderselect-3").change(function () {
      var order = $("#orderselect-3").val();;
      $(".item-3").css("order",order);
  });
  
  $("#orderselect-4").change(function () {
      var order = $("#orderselect-4").val();;
      $(".item-4").css("order",order);
  });
  
  $("#orderselect-5").change(function () {
      var order = $("#orderselect-5").val();;
      $(".item-5").css("order",order);
  });
  
  $("#orderselect-7").change(function () {
      var order = $("#orderselect-7").val();;
      $(".item-7").css("order",order);
  });
  
});