Sort divs alphabetically or numerically (based on content)

http://www.sitepoint.com/forums/showthread.php?1200566-Sort-div-order-alphabetically-based-on-contents

by fiddledrew

HTML

<!DOCTYPE html>
<html>
<head>
  <!-- Include meta tag to ensure proper rendering and touch zooming -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Include jQuery Mobile stylesheets -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- Include the jQuery library -->
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <!-- Include the jQuery Mobile library -->
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>

.container {
    width: 200px;
    height: 260px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}
.card div {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
    background: blue;
    -webkit-transform: rotateX( 180deg );
    -moz-transform: rotateX( 180deg );
    -o-transform: rotateX( 180deg );
    transform: rotateX( 180deg );
}
.card.flipped {
    -webkit-transform: rotateX( 180deg );
    -moz-transform: rotateX( 180deg );
    -o-transform: rotateX( 180deg );
    transform: rotateX( 180deg );
}


</style>
</head>
<body>
        <div...

CSS

42856#SJD#Expense#Accountancy#13###
42856#SJD#Expense#Accountancy#13##
42856#S Patel#Expense#Salary#13##
42856#Mileage#Expense#travel#13#48#
42887#VAT Paid#HMRC#VAT#13##
42887#SJD#Expense#Accountancy#13##
42887#S Patel#Expense#Salary#13##
42887#Mileage#Expense#travel#13#208#
42917#sjd#Expense#accountncy#13##
42917#S Patel#Expense#Salary#13##
42917#milage#Expense#travel#13#240#
42917#Paint#Expense#sundry#13#50#
42917#Dust Covers#Expense#sundry#13#50#
42917#Folding Ladder#Expense#sundry#13#150#
42917#Hatfield Council#Expense#sundry#13##
42917#D A Mcneil#Expense#sundry#13##
42948#sjd#Expense#accountncy#13##
42948#Mark CLIMp#Expense#Internet#13##
42948#S Patel#Expense#Salary#13##
42948#VAT Paid#Expense#VAT#13##
42948#Mileage#Expense#travel#13#80#
42979#sjd#Expense#accountncy#13##
42979#S Patel#Expense#Salary#13##
42979#Mileage#Expense#travel#13#80#
42979#Traders only Data#Expense#software#13##400
42979#WH Brown#Expense#sundry#13##
43009#sjd#Expense#accountncy#13##
43009#S Patel#Expense#Salary#13##
43009#D Patel#Expense#Salary#13##
43009#Mileage#Expense#travel#13#64#
43040#sjd#Expense#accountncy#13##
43040#S Patel#Expense#Salary#13##
43040#D Patel#Expense#Salary#13##
43040#Mileage#Expense#travel#13#112#
43040#VAT#HMRC#VAT#13##
43070#sjd#Expense#accountncy#13##
43070#S Patel#Expense#Salary#13##
43070#D Patel#Expense#Salary#13##
43070#XMAS#Expense#Entertainment#13##300
43070#milage#Expense#travel#13#128#
43101#sjd#Expense#accountncy#13##
43101#SP Div 30750 2017#DIV#DIV#13##
43101#DP Div 30750 2017#DIV#DIV#13##
43101#SP Div 30750 2017#DIV#DIV#13##
43101#DP Div 30750 2017#DIV#DIV#13##
43101#SP Div 30750 2017#DIV#DIV#13##
43101#DP Div 30750 2017#DIV#DIV#13##
43101#SP Div 30750 2017#DIV#DIV#13##
43101#DP Div 30750 2017#DIV#DIV#13##
43101#S Patel#Expense#Salary#13##
43101#D Patel#Expense#Salary#13##
43101#HMRC CT prepayment - 2017#HMRC#HMRC#13##
43101#Mileage#Expense#travel#13#128#
43101#2 used...