railbro, вроде бы такое тебе нужно...
<style>
.footer-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* или вот так
display: flex;
justify-content: space-between;
*/
}
.footer_1 {
order: 1;
}
.footer_2 {
order: 4;
}
.footer_3 {
order: 2;
}
.footer_4 {
order: 3;
}
@media (max-width: 1000px) {
.footer-columns {
display: block;
column-count: 2;
}
.footer_2 {
break-inside: avoid;
}
}
</style>
<div class="footer-columns">
<ul class="footer_1">
<li class="footer-item item_hover"><a href="#" class="footer-item">Продукты</a></li>
<li class="footer-item"><a href="#" class="footer-link">Документооборот</a></li>
<li class="footer-item"><a href="#" class="footer-link">Архив</a></li>
<li class="footer-item"><a href="#" class="footer-link">Электронная подпись HoReCa</a></li>
<li class="footer-item"><a href="#" class="footer-link">Маркировка</a></li>
<li class="footer-item"><a href="#" class="footer-link">GLN</a></li>
<li class="footer-item"><a href="#" class="footer-link">Аутстаффинг</a></li>
<li class="footer-item"><a href="#" class="footer-link">Меркурий</a></li>
<li class="footer-item"><a href="#" class="footer-link">Факторинг</a></li>
<li class="footer-item"><a href="#" class="footer-link">Склад</a></li>
<li class="footer-item"><a href="#" class="footer-link">Территория</a></li>
<li class="footer-item"><a href="#" class="footer-link">Транспорт</a></li>
</ul>
<ul class="footer_2">
<li class="footer-item item_hover"><a href="#" class="footer-item">Пресс-центр</a></li>
<li class="footer-item item_hover"><a href="#" class="footer-item">Контакты</a></li>
<li class="footer-item item_hover"><a href="#" class="footer-item">Вопрос-Ответ</a></li>
<li class="footer-item item_hover"><a href="#" class="footer-item">Техподдержка</a></li>
<li class="footer-item item_hover"><a href="#" class="footer-item">Полезные статьи</a></li>
</ul>
<ul class="footer_3">
<li class="footer-item item_hover"><a href="#" class="footer-item">Способы оплаты</a></li>
<li class="footer-item"><a href="#" class="footer-link">Web-интерфейс</a></li>
<li class="footer-item"><a href="#" class="footer-link">Интеграция 1С</a></li>
<li class="footer-item"><a href="#" class="footer-link">Интеграция через API</a></li>
</ul>
<ul class="footer_4">
<li class="footer-item item_hover"><a href="#" class="footer-item">Компания</a></li>
<li class="footer-item"><a href="#" class="footer-link">О компании</a></li>
<li class="footer-item"><a href="#" class="footer-link">Партнеры</a></li>
<li class="footer-item"><a href="#" class="footer-link">Отзывы</a></li>
<li class="footer-item"><a href="#" class="footer-link">Лицензии</a></li>
<li class="footer-item"><a href="#" class="footer-link">Кейсы</a></li>
<li class="footer-item"><a href="#" class="footer-link">Акции</a></li>
<li class="footer-item"><a href="#" class="footer-link">Платформа</a></li>
<li class="footer-item"><a href="#" class="footer-link">LERADATA</a></li>
<li class="footer-item"><a href="#" class="footer-link">Лицензионный договор</a></li>
</ul>
</div>