Позиционирование элементов в HTML

Ребят, есть такая задача: На моем сайте с ДЕСКТОП версии есть блоки со списками:

<div class="let-column" style="width: 49%; float: left">
<ul>
<li>Таб_1</li>
<li>Таб_2</li>
<li>Таб_3</li>
</ul>
</div>

<div class="right-column" style="width: 49%; float: left">
<ul>
<li>Тело_1</li>
<li>Тело_2</li>
<li>Тело_3</li>
</ul>
</div>
Что дает мне некую природу ТАБОВ в 2 колонки.

Требуется на МОБИЛЬНОЙ версии сайта сделать так, чтобы ТЕ ЖЕ блоки располагались вот так

<div class="let-column" style="width: 49%; float: left">
<ul>
<li>Таб_1</li>
<li>Тело_1</li>
<li>Таб_2</li>
<li>Тело_2</li>
<li>Таб_3</li>
<li>Тело_3</li>
</ul>
</div>

<div class="right-column" style="width: 49%; float: left; display: none">
<ul>
</ul>
</div>

 

1. Хорошо .. вот сайт - http://cp11502.tmweb.ru
2. Речь об этом аккордеоне - http://joxi.ru/bmo6YxqhxplBwr
3. На мобилках должно быть вот так - http://joxi.ru/brREea1cJa81zA

--- Добавлено, 4 авг 2018 ---

ВОт так решил:

isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if (isMobile.any()) {
for (var i = $('.faq-tab').length; i >= 0; i--) {
$('.faq-tab').eq(i-1).after($('.tabs__item'+i));
}
}