Поменять вертикально расположенные блоки местами

Задача

Нужно поменять местами блоки которые расположены вертикально. Это проще сделать с помощью ротации свойств table-header-groop и table-footer-group, но если блоков больше двух их уже недостаточно.

Сперва рассмотрим как это сделать по нажатию кнопки.

HTML

<button id="remove_adv_button">Убрать рекламу</button> <button id="show_adv_button">Вернуть рекламу</button> <div id="rb-content-articles">One<div> <div id="rb-related-articles">Two<div> <div id="rb-first-adv">Three<div> <div id="rb-second-adv">Four<div>

CSS

<style> #remove_adv_button,#show_adv_button {width:100%;font-size:1.2rem;} #show_adv_button {display: none;} .rb_grid { display: grid; grid-template-columns: 100%; } .rb-first-adv { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .rb-content-articles { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; } .rb-second-adv { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; } .rb-related-articles { grid-column-start: 1; grid-column-end: 2; grid-row-start: 7; grid-row-end: 8; } </style>

JavaScript

let remove_adv_button = document.getElementById('remove_adv_button'); let show_adv_button = document.getElementById('show_adv_button'); let r_content_articles = document.getElementById('rb-content-articles'); let r_related_articles = document.getElementById('rb-related-articles'); let r_first_adv = document.getElementById('rb-first-adv'); let r_second_adv = document.getElementById('rb-second-adv'); remove_adv_button.addEventListener('click', () => { console.log("remove adv button clicked"); r_content_articles.style.gridRowStart = "1"; r_content_articles.style.gridRowEnd = "2"; r_related_articles.style.gridRowStart = "3"; r_related_articles.style.gridRowEnd = "4"; r_first_adv.style.gridRowStart = "5"; r_first_adv.style.gridRowEnd = "6"; r_second_adv.style.gridRowStart = "7"; r_second_adv.style.gridRowEnd = "8"; show_adv_button.style.display = "block"; remove_adv_button.style.display = "none"; }); show_adv_button.addEventListener('click', () => { console.log("show adv button clicked"); r_content_articles.style.gridRowStart = "3"; r_content_articles.style.gridRowEnd = "4"; r_related_articles.style.gridRowStart = "7"; r_related_articles.style.gridRowEnd = "8"; r_first_adv.style.gridRowStart = "1"; r_first_adv.style.gridRowEnd = "2"; r_second_adv.style.gridRowStart = "5"; r_second_adv.style.gridRowEnd = "6"; show_adv_button.style.display = "none"; remove_adv_button.style.display = "block"; });