Sort div order alphabetically based on contents.

Hi all

I have a simple page here to explain my question.

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.

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

		<meta charset="UTF-8">
		<script src=""></script>
		<link rel="stylesheet" href="css/styles.css" />
		<style type="text/css">
        background: #eee;
        font-family: sans-serif;
        background: red;
        height: 200px;
        width: 200px;
      .box h1{
        color: white;
        font-size: 3.5em;
        text-align: center;
		<title>Title of the document</title>
  <div class="wrap">
    <div class="box one">
    <div class="box two">
    <div class="box three">
    <div class="box four">

	    var order = [];