Я пытаюсь адаптировать сетку из 5 столбцов в нижнем колонтитуле в зависимости от размера экрана клиента.
Если экран больше ширины x, столбцы располагаются рядом друг с другом. Если экран меньше ширины x, то первые 4 столбца сгруппированы в 2, так что создаются 2 строки, а 5-й столбец сохраняет свою ширину.
Кроме того, 5-й столбец имеет фиксированную ширину 438 пикселей, в то время как первые два столбца имеют ширину в зависимости от размера экрана, поэтому заполняется оставшаяся ширина окна. Ниже я иллюстрирую свой результат, который я желаю:
Ниже я перечисляю свои CSS и HTML:
.cont-links{
padding: 20px;
}
.links{
background-color: #1481BA;
}
.links .links-wrapper{
display: table-row-group;
}
.links .footer-nav-wrapper{
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
// .links .footer-nav-wrapper .first-two-wrap, .links .footer-nav-wrapper .last-two-wrap{
// display: table-cell;
// }
.links .footer-nav-wrapper .link-group{
display: table-cell;
width: 50%;
padding-right: 20px;
}
.links span{
display: block;
padding: 20px 0px;
}
.links .footer-nav-wrapper .link-group > .footer-link-wrapper{
padding: 20px 0px 0px 0px;
}
.links span:first-child{
border-bottom: 2px solid #63CCCA;
}
.links a{
color: #fff;
font-weight: 100;
}
.links .title{
text-transform: uppercase;
}
.links .connect{
width: 418px;
display: table-cell;
}
.links .connect span{
display: block;
}
.links .connect .logo{
height: 80px;
float: none;
margin-top: 20px;
margin-bottom: 10px;
}
.links .connect .title-follow-us-wrapper{
padding: 20px 0px 10px 0px;
}
.links .connect .footer-social-icons-wrapper img{
height: 71px;
width: 71px;
}
<footer>
<section class="links">
<div class="cont cont-links">
<div class="links-wrapper">
<div class="footer-nav-wrapper">
<div class="link-group about">
<span><a href="about/index.php" class="title">About</a></span>
<span class="footer-link-wrapper"><a href="about/whatistechpocket/index.php" class="link-1">What is TechPocket?</a></span>
<span class="footer-link-wrapper"><a href="about/whoarewe/index.php" class="link-2">Who Are We</a></span>
<span class="footer-link-wrapper"><a href="about/team/index.php" class="link-3">Meet The Team</a></span>
</div>
<div class="link-group community">
<span><a href="#" class="title">community</a></span>
<span class="footer-link-wrapper"><a href="blog/index.php" class="link-1">Blog</a></span>
<span class="footer-link-wrapper"><a href="forum/index.php" class="link-2">Forum</a></span>
<span class="footer-link-wrapper"><a href="youtubevideos/index.php" class="link-3">TechPocket</a></span>
</div>
<div class="link-group support">
<span><a href="support/index.php" class="title">Support</a></span>
<span class="footer-link-wrapper"><a href="donate/index.php" class="link-1">Donate</a></span>
<span class="footer-link-wrapper"><a href="report/index.php" class="link-2">Report An Issue</a></span>
</div>
<div class="link-group contact-us">
<span><a href="contactus/index.php" class="title">Contact Us</a></span>
<span class="footer-link-wrapper"><a href="contactus/index.php" class="link-1">Leave A Message</a></span>
<span class="footer-link-wrapper"><a href="privacy/index.php" class="link-2">Privacy Policy</a></span>
<span class="footer-link-wrapper"><a href="terms/index.php" class="link-3">Terms Of Service</a></span>
</div>
</div>
<div class="connect">
<span><a href="#" class="title">Connect With Us</a></span>
<div class="logo"></div>
<div class="brief-page-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam dictum semper lorem sed sollicitudin. Nunc eleifend
suscipit erat, fringilla ornare justo pretium nec. Proin sit
amet massa nec massa pellentesque rutrum non sit amet arcu.</div>
<span class="title-follow-us-wrapper"><a href="#" class="title title-follow-us">Follow Us:</a></span>
<div class="footer-social-icons-wrapper">
<a href="https://www.facebook.com/techpocketofficial" target="_blank"><img src="views/css/facebook-logo.png" alt="FB" class="fb-logo"></a>
<a href="https://twitter.com/techpocket1" target="_blank"><img src="views/css/twitter-logo.png" alt="Twitter" class="twitter-logo"></a>
<a href="https://plus.google.com/+techpocketvideo" target="_blank"><img src="views/css/google-icon.png" alt="Google+" class="google-logo"></a>
</div>
<div class="social"></div>
</div>
</div>
</div>
</section>
</footer>
Я пробовал несколько методов, чтобы заставить это работать, и ответ не мог быть обнаружен. Я бы либо достиг любой из двух схем. Мой вопрос: есть ли способ, чтобы я мог сделать первые 4 столбца отзывчивыми, как показано выше, и оставить последний столбец справа без использования JS?
Я буду очень признателен за вашу помощь.