Как сделать разное количество контента в адаптиве?

Делать можно как угодно. В частности как вы описали. С использованием javascript + css.

Обычно делают просто адаптивную верстку, иногда скрывают лишние блоки на мобильных, не думаю что нужно что то удалять при смене размера... это точно не очень правильно. Да и закешировать страницу будет неудобно, + сео если страница посадочная. Обычно страница должна быть одинаковая по содержимому и на мобильном и на компьютере, просто нужно менять/скрывать ненужные блоки. Например на широком экране показывать 3 в ряд, а на узком 1 в ряд, но все равно 3.

Как и написали вам в комментариях: адаптивный дизайн, подразумевает изменение способа отображения контента, чтобы он был удобно доступен на разных форм факторах. Но не подразумевает изменение самого контента.

И если вам попадётся такой заказ — убеждайте дизайнера что он не прав.

Тем не менее, ситуации бывают всякие, и ваш случай не совсем типичный. Я быреализовал следующим образом:

1. Обратится к серверу, загрузить информацию для сколько то карточек, скажем для 10.
   
2. Посмотреть на ширину экран.
   
3. Вывести 2 или 3 карточки в зивисимости от формфактора. Остальное оставить в памяти.
   
4. По клику на "загрузить еще" достаём ещё 2-3 карточки из памяти и отображаем.
   
5. Если карточки в памяти кончаются — сделать запрос на сервер и загрузить ещё 10.
   

я просто хочу разобраться в этом вопросе. Не раз встречал такие макеты. И допустим попался заказчик который пену со рта пускает и говорит хочу вот прям как в макете.

Бред, покажите хотя бы один такой макет.
ВСЕ шаблоны меняют отображение согласно медиа-запросов, соответственно вот эти вот ваши карточки подгружаются в соответствующем кол-ве.
Если вы печётесь о нагрузке на мобильник жертвы, то экономия на спичках.

И еще раз - покажите хотя бы один упомянутый вами шаблон.
Ну и вопрос поставлен туповато, половина отвечающих даже сразу не разобрались, что нужно по итогам... Вы достойны этих ответов.