0<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

<p>Цей приклад показує як працює властивість <code>order</code>. Змінюйте значення для властивості нижче, щоб змінити порядок відображення виділеного нащадка в контейнері нижче.</p>

<hr>
  
<strong>order: </strong>
<input type="number" class="input" id="order" value="2" min="0">
<strong>;</strong><br><br>

<hr>

<div class="box">
  <div class="child one">order: 1;</div>
  <div class="child hl">order: 2;</div>
  <div class="child two">order: 3;</div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: 'Fira Sans', sans-serif;
}

.child {
  padding: 50px 16px 16px 16px;
  background-color: gold;
  font-size: 80%;
  font-family: monospace;
  text-align: center;
  border: 2px solid #dcdcdc;
}

.child.one {
  order: 1;
}

.child.hl {
  order: 2;
  background-color: #F74C32;
}

.child.two {
  order: 3;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}

.box {
  height: 150px;
  background-color: #dcdcdc;
  padding: 16px;
  display: flex;
}

hr {
  margin-bottom: 16px;
}

$('.input').on('change', function() {
 
  var order = $('#order').val();
  
  $('.child.hl').css( 'order', order );
  $('.child.hl').html( 'order: ' + order + ';' );
  
});