Sort div order alphabetically based on contents.

Hi all

I have a simple page here to explain my question.

http://www.ttmt.org.uk/sort/

It's a group of divs that each have a letter.

Is it possible to rearrange the div's so they are alphabetically in order - A,B,C,D

I haven't attempted any code yet but is posible to add a reference to the div's into an array and then order the array based on the letter in the div - that sounds crazy but i can't think of any other way of doing this.

Thanks in advane for any help.


Code:
<!DOCTYPE html>
<html lang="en">

	<head>	
		<meta charset="UTF-8">
  
		<!--jQuery-->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  
		<!--css-->
		<link rel="stylesheet" href="css/styles.css" />
  
		<style type="text/css">
      body{
        background: #eee;
        font-family: sans-serif;
      }
      
      .box{
        background: red;
        height: 200px;
        width: 200px;
      }
      .box h1{
        color: white;
        font-size: 3.5em;
        text-align: center;
      }
      
		</style>
    
		<title>Title of the document</title>
	</head>
  
<body>
  
  <div class="wrap">
    
    <div class="box one">
      <h1>B<h1>
    </div>
    
    <div class="box two">
      <h1>A<h1>
    </div>
    
    <div class="box three">
      <h1>D<h1>
    </div>
    
    <div class="box four">
      <h1>C<h1>
    </div>
      
  </div>  

	<script>
	  
	  $(function(){
	    
	    var order = [];
	    
	    
	    
	  })
	
	</script>
</body>

</html>