JavaScript ile Html Elemanları Nasıl Sıralanır?

<div class="items">

<div class="item" id="item1">
<h4>name</h4>
<img src="">
<p class="price">1</p>
</div>

<div class="item" id="item2">
<h4>name</h4>
<img src="">
<p class="price">23</p>
</div>

<div class="item" id="item4">
<h4>name</h4>
<img src="">
<p class="price">3</p>
</div>
</div>

İtemlerin sayısal olarak .price elemanına göre javaScript ile sayafa yüklendiğinde otomatik olarak azdan çoğa sıralanmasnı nasıl sağlarım?
Ayrıntılı bilgi verirseniz çok sevinirim.