Init HTML

Xem demo

CSS cần thiết

.reverse-list {
    display: flex;
    flex-direction: column-reverse;
}

Nếu chỉ có nhu cầu đảo ngược danh sách, thì các bạn thêm class này vào thẻ UL – OL là đủ.

Bấm để đảo ngược danh sách

$('#reverse').click(function() {
    if ($(this).hasClass('curr-reverse')) {
        $('#list-to-reverse').removeClass('reverse-list');
        $(this).removeClass('curr-reverse');
    } else {
        $('#list-to-reverse').addClass('reverse-list');
        $(this).addClass('curr-reverse');
    }
});

Đơn giản chỉ cần thêm và xóa reverse-list khi bấm.

Chúc các bạn thành công!