Banner_sortieren_nach_Grössen

ich habe Banner 1,2,3,4,5,6 mit versch. Breiten. Alle sind gleich hoch. Nun will ich die Banner so anzeigen lassen, dass jeweils immer die volle Breite der html-Seite ausgenutzt wird. Die Banner sollen per Zufallsreihenfolge angezeigt werden. 1 Breite = 100% der html-Seite 2 Breite = 50% 3 Breite = 25% 4 Breite = 33.3% 5 Breite = 75% 6 Breite = 66.6% Folgende Kombis sind in der Breite möglich: 1 2+2 2+3+3 oder 3+3+2 oder 3+2+3 4+4+4 oder 4+6 oder 6+4 5+3 oder 3+5 Fragen: Wie kann ich am besten die Zufallsgenerierung und Sortierung vornehmen lassen ? Und wie kann ich zusätzlich/optional bestimmen, dass Banner 1 immer an erster Stelle(oben) erscheint ?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<style> *{ margin:0; padding:0; box-sizing:bordert-box; } body{ width:100%; } button{ position:fixed; top:0; z-index:12; left:0; } main{ width:100%; height:100vh; display:flex; } .box{ border:1px solid black; } .box0{ width:100%; background:red; } .box1{ width:50%; background:orange; } .box2{ width:25%; background:green; } .box3{ width:33.3%; background:blue; } .box4{ width:75%; background:yellow; } .box5{ width:66.6%; background:grey; } </style> <body> <button>Random boxen <span id="info"></span></button> <main></main> <script> var moeglich=[[0],[1,1],[1,2,2],[2,2,1],[2,1,2],[3,3,3],[3,5],[5,3],[4,2],[2,4]]; const ma=document.getElementsByTagName('main')[0]; const inf=document.getElementById('info'); const but=document.getElementsByTagName('button')[0]; but.addEventListener('click',function(){ let x = Math.round(Math.random() * (moeglich.length-1 - 0)); ma.innerHTML=''; inf.innerHTML=' '+moeglich[x]; for(v=0;v<=moeglich[x].length-1;v++){ bo=document.createElement('div'); bo.className='box box'+moeglich[x][v]; ma.appendChild(bo) } }); but.click(); </script> </body>