<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<div class="reorder">
<p class="second">Second paragraph</p>
<p class="first">First paragraph</p>
</div>
.reorder {
display: flex;
flex-direction: column;
margin-top: 24px;
}
.first {
order: 1;
}
.second {
order: 2;
}
p {
border: 1px solid black;
width:200px;
margin: 0 0 8px;
}
.reorder p {
border: 2px solid darkblue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.