Você pode fazer isso com CSS, por exemplo:
.badge-card.betauser {
order: -1;
}
Devido à forma como o layout da página de emblemas foi construído atualmente (flexbox), talvez você também precise ajustar algumas margens em diferentes larguras de tela se alterar a ordem.
.badge-card.betauser {
order: -1;
@media screen and (max-width: 850px) {
margin-right: 1.63%
}
}
.badge-card.betatester {
@media screen and (max-width: 850px) {
margin-right: 0;
}
}
A necessidade de ajustar as margens desaparecerá ainda este ano, quando deixarmos de dar suporte ao IE11 (pois poderemos construir o layout com grid em vez de flexbox).