I have form where I want to sort each person by their last name alphabetically. I’m not sure how to do that. The form has a list of people/images in 4 rows.
Here is a sample of some of my code:
<div id="about-team">
<div id="content" class="content full">
<div class="our-partners">
<div class="container">
<h2 class="title"><small>Meet our</small> LEADERSHIP TEAM</h2>
<div class="row">
<div class="col-sm-12">
<div class="management-content">
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/RPlutzer.jpg" alt="" class="img-thumbnail">
<div class="topic">R Plutzer</div>
<div class="discussion">Chief Financial Officer</div>
</div>
</div>
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/BWalls.jpg" alt="" class="img-thumbnail">
<div class="topic">B Walls</div>
<div class="discussion">VP of Operations</div>
</div>
</div>
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/FMalagisi.jpg" alt="" class="img-thumbnail">
<div class="topic">FMalagisi</div>
<div class="discussion">VP of Finance</div>
</div>
</div>
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/tsutton.jpg" alt="" class="img-thumbnail">
<div class="topic">TSutton</div>
<div class="discussion">VP OF IT</div>
</div>
</div>
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/JDillon.jpg" alt="" class="img-thumbnail">
<div class="topic">J Dillon</div>
<div class="discussion">Fleet Manager</div>
</div>
</div>
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/EEwbank.jpg" alt="" class="img-thumbnail">
<div class="topic">E Ewbank</div>
<div class="discussion">Sales Director</div>
</div>
</div>
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/GGlassley.jpg" alt="" class="img-thumbnail">
<div class="topic">G Glassley</div>
<div class="discussion">Operational Efficiency Manager</div>
</div>
</div>
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/KLottGratz.jpg" alt="" class="img-thumbnail">
<div class="topic">K Lott-Gratz</div>
<div class="discussion">Collections Resolution Coordinator</div>
</div>
</div>
<div class="content-item">
<div class="description" style="text-align: center;">
<img src="images/Bio/PMcLaughlin.jpg" alt="" class="img-thumbnail">
<div class="topic">PMcLaughlin</div>
<div class="discussion">Financial Planning & Control Manager</div>
</div>
</div>
</div>
</div>
<!-- End -->
</div>
</div>
</div>
</div>
</div>
</div>
I’m thinking some sort of javascript but not sure how to do this.