Sort different li elements with same class level

I have an unordered list as follows

<ul>
    <li class="A">abb</li>
        <li class="B">dbb</li>
            <li class="C">zbb</li>
            <li class="C">abb</li>
        <li class="B">ybb</li>
            <li class="C">abb</li>
            <li class="C">zbb</li>
            <li class="C">zab</li>

    <li class="A">zbb</li>

    <li class="A">xbb</li>

    <li class="A">cbb</li>
        <li class="B">bbb</li>
            <li class="C">cbb</li>
            <li class="C">abb</li>
</ul>

This is a grand parent > parent > child relationship and I wish to alphabetically order them whilst maintaining the individual relationship structure. The markup can not be changed on import unfortunately as it is generated elsewhere.

Desired output:

<ul>
    <li class="A">abb</li>
        <li class="B">dbb</li>
            <li class="C">abb</li>
            <li class="C">zbb</li>
        <li class="B">ybb</li>
            <li class="C">abb</li>
            <li class="C">zab</li>
            <li class="C">zbb</li>

    <li class="A">cbb</li>
        <li class="B">bbb</li>
            <li class="C">abb</li>
            <li class="C">cbb</li>

    <li class="A">xbb</li>

    <li class="A">zbb</li>
</ul>

I have never encountered this issue before. Whenever I have had to order a list it has been a case of ordering the list in it's entirety. Has anybody got any clever suggestions or advice on how I could approach this problem.

Current Fiddle http://ift.tt/1M1NJSJ