Как отсортировать список по n-му классу каждого дочернего элемента

Question

У меня есть следующая структура HTML:

<div class="container">
    <div class="atr1 atr2 atr3"></div>
    <div class="atr1 atr2 atr3"></div>
    <div class="atr1 atr2 atr3"></div>
    <div class="atr1 atr2 atr3"></div>
    <div class="atr1 atr2 atr3"></div>
    <div class="atr1 atr2 atr3"></div>
    <div class="atr1 atr2 atr3"></div>
</div>

<button type='button' id='sort'>Sort</button>

Мне нужно отсортировать список по n-му классу каждого дочернего элемента, например, по .atr2.

Как это можно сделатьв jQuery или чистом JS?

Я пытался поместить n-й класс первого потомка в переменную, подобную этой:

var atr2 = document.getElementsByClassName('atr1')[0].classList.item(1);

Я нашел фрагмент кода, который сортирует список потекст внутри каждого элемента div.

function sortUl(mylist) {
    var listitems = $('.container').find('div').sort();
    listitems.sort(function(a, b) {
    return jQuery(a).text().toUpperCase().localeCompare(jQuery(b).text().toUpperCase()); 
})
jQuery.each(listitems, function(idx, itm) { mylist.append(itm); });    
}


$('#sort').on('click', function () {
    sortUl($('.container'));
});

Как можно изменить этот фрагмент кода, чтобы он выполнял правильную работу? Полностью новое решение также подойдет моим потребностям.

Любые советы приветствуются, пожалуйста, помогите мне, спасибо!