osimone

Где надо развернуть элементы: const parent = document.querySelector('ul');.

Разворачиваем:

parent.querySelectorAll(':scope > *').forEach(n => parent.prepend(n));

// или

Element.prototype.append.apply(parent, [...parent.children].reverse());

// или

const [ first, ...rest ] = parent.children;
first?.before(...rest.reverse());

// или

for (const n of parent.children) {
  parent.insertBefore(n, parent.firstElementChild);
}

// или

for (let i = parent.children.length; i--;) {
  parent.insertAdjacentElement('beforeend', parent.children[i]);
}

// или

const elems = Array.from(parent.children);
while (elems.length) {
  parent.appendChild(elems.pop());
}

Используйте flex для выравнивая контента, ты центрирования блока по вертикали\горизонтали: justify-content: center, align-items: center
Если вы хотите что бы вам помогли с реализацией кода - сам код заливайте на codepen, и скидывайте дизайн блока на всех устройствах, если у вас адаптив.