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 + ';' );
});
This Pen doesn't use any external CSS resources.