<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>
.footer-columns {
display: flex;
}
.footer_1{
order: 1;
}
.footer_2{
order: 4;
}
.footer_3{
order: 2;
}
.footer_4{
order: 3;
}
@media (max-width:1000px) {
.footer-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
ul, li{
//width: auto;
width: max-content;
}
@media (max-width:1000px) {
.footer-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
ul, li{
//width: auto;
width: max-content;
}
.footer_2{
order: 3;
}
.footer_4{
order: 3;
}
}
}
