Comment réorganiser par ordre décroissant en js

Bonjour,

Pour un projet de boite a rhytme en JS
J'ai généré 9 case numéroté de 1 a 9.

Pour cela j'ai créer un tableau stockant les string '1','2','3' etc associé l'url d'un son
Ensuite j'ai créer une fonction construct pour afficher ces 9 cases coté front en générant le HTML en JS.

Dans le code ci dessous j'ai volontairement mis 12 a la place de 6.
Pour vous expliquer que coté front le 12 est placé en tant que dernière case, même si il se trouve au milieu du tableau data dans le code.
Et j'aimerai savoir comment faire en sorte que le code généré organise les case par ordres décroissant.
Ou que le code généré soit le même que l'ordre tel qui l'ai écrit dans le code.

Voici le code :

/* la const data contient le tableau qui associe un 'string' a l'url d'un son audio*/
const data = {
    '9': {sound: 'media/sounds/drum1.mp3'},
    '8': {sound: 'media/sounds/drum2.mp3'},
    '7': {sound: 'media/sounds/beat1.mp3'},
    '12': {sound: 'media/sounds/beat2.mp3'},
    '5': {sound: 'media/sounds/beat3.mp3'},
    '4': {sound: 'media/sounds/lindrum.mp3'},
    '3': {sound: 'media/sounds/percu1.mp3'},
    '2': {sound: 'media/sounds/electro1.mp3'},
    '1': {sound: 'media/sounds/electro2.mp3'},
  };
 
/* Constructeur du drumPad */
/**/
function construct(){
    for(const letter in data){ // On récupère chaque lettre du tableau data
        const keyDiv = document.createElement('div');//créer une div dans la constante 'keydiv'
        keyDiv.id = "s" + letter;//Ajoute une id unique a chaque div
        keyDiv.classList.add('drum');//Ajouter une classe drum a la div généré par 'keydiv'
         
        let h2 = document.createElement('h2');//Créer le H2
        h2.textContent = letter;// On définis la variable letter comme etant le contenu de chaque element h2
 
        keyDiv.appendChild(h2);// On définis le h2 créée comme étant un enfant de keydiv    
        document.getElementById('musicBox').appendChild(keyDiv);//On récupere #musicBox pour le définir comme étant le parent keydiv.
 
        /* Au clique on joue le son */
        keyDiv.addEventListener('click', function(event) { //On active l'evenement clique de souris
            let letter = event.currentTarget.querySelector('h2').textContent; //Selectionne le H2 cliquer par l'evenement
            playDrum(letter);//Joue la lettre qui a été cliquer.
        })
    }
  }

EDIT : Correction des balises de code.