Здравствуйте, это не так страшно как вам показалось
Это все делается очень просто, а то есть:
допустим вот такой код:
<div class="main">
<div class="dont__main">
<div class="div__for__img">
<img src="путь">
<img src="путь">
<img src="путь">
<img src="путь">
<img src="путь">
<img src="путь">
</div>
</div>
</div>
Так вот, в таком случае как видите у нас 6 изображений, и тут для адаптива к нам на помощь приходит Flexbox
Мы просто задаем
.dont__main{
display:flex;
flex-wrap:wrap;
}
А остальное, как вы написали про меню и табы, это делается через медиа запросы, к примеру:
<p class="no__mobile">text for decstop, dont show on mobile</p>
<p class="no__pc">text for mobile, dont show on pc </p>
Делаем так:
@media screen and (max-width:767px){
.no__mobile{
display:none; /*и на мобилах текста нету!*/
}
}
/*убираем на пк*/
@media screen and (min-width:999px){
.no__pc{
display:none;/*Пк прощается с текстом*/
}
}
/*Это всего лишь пример того как вы можете сверстать эти секции*/
И все :)
Если вам интересна технология Flexbox то вот вам
Шпаргалочка 
Простой