Разрабатывать ли несколько макетов для разных устройств?
Мне кажется вам еще рано создавать адаптивный сайт, раз спрашиваете об этом. Наберитесь опыта в адаптивности. Ведь адаптивный сайт - это не просто изменение структуры блоков. Это сугубо моё мнение. Иначе наступите на кучу граблей. В первую очередь, нужно знать основы верстки. Без этого никуда. Так вы никогда не поймёте, как работает браузер.
При чем тут мобильное приложение и mobile-first?Допустим, верстать будем на Bootstrap 3, тогда и вариантов макета должно быть 4 штуки? 
Бутстрам вам не скажет, сколько должно быть макетов. Все зависит от вашего дизайна. Если он простой, то макеты вам не понадобятся. Знание сетки бутстрапа вам будет достаточно для перестроения блоков. А так же, использование бутстрапа, накладывает на вас некоторые ограничения. Ведь вам придётся рисовать под него. Выбирайте инструменты по необходимости, а не потому, что так чаще всего делают многие.Моё мнение - двигаться здесь лучше в обратную сторону, от больших экранов к маленьким
Для начала, нужно вам понять, в чем истина mobile-first и от чего лучше начать. Ибо я уверен, что вы не знаете, в чем разница. Это лишь моё мнение.
Я вижу 3 варианта, для решения проблемы.
1) Рисуете макет на 1920 например. Допустим, у вас фотошоп. Дальше по немногу уменьшаете рабочую область и все элементы, смотрите, что и как выглядит. Все ок? Уменьшаете дальше. Если видите, что выглядит один блок уже не хорошо, текст не влазит или еще что. Вот вам 2й макет. И так вплоть до 320px. Но такой способ не даст вам полной картины. Браузер - это не фотошоп и не иллюстратор. Многое он не умеет, а то, что умеет, работает не всегда так, как в фотошопе. Ну думаю вы и так это знаете)))
Минусы:
- Это очень долго.
- Вы все ровно не предусмотрите все возможные нюансы.
2) Это сидеть с фронтендом и делать прям в живую. Так вы будите видеть как все работает в живую и видеть все проблемы. Ведь о некоторых вещах вы может даже и не подумать. Главное тесно работать с фронтенд разработчиком. Вам проще будет найти точки ширины, высоты для рисования макета.
Плюсы:
Более детальная проработка сайта
Минусы:
Время
3) Чаще всего, рисуют 4 макета. Это десктоп(1920), ноут(1366), планшет(1024 - 768), телефон(480 - 320). А там разработчик по ходу дела сам меняет мелкие моменты.
Плюсы:
Самый простой и быстрый вариант
Минусы:
Разработчик может поменять некоторые элементы на свой вкус, которые не вошли в данные диапазоны, что в итоге может не понравится вам. А переделывать не особо хочется. Или сделает так, как легче ему в плане реализации
По-хорошему - да, создавать.
Мое мнение, что для хорошего адаптивного сайта макетов должно быть как минимум три - 320 (телефоны), 720 или 768 (планшет вертикально) и 1280+ (десктопы, ноуты и некоторые самые большие планшеты). Горизонтальный планшет в этом случае получается из макета на 1280 плюс некоторые словесные описания. Типа такого: берется десктоповый макет, только товаров в ряд 4 вместо 5 и базовый размер шрифта на 1px меньше. Это пример из головы, но суть думаю понятна.
Для тех сайтов, которые тянутся вширь без ограничений максимальной ширины, имеет смысл также добавить 4-ый размер - 1920.
То есть если вопрос "нужно ли?" - ответ "да, очень желательно".
Ну а дальше вопрос вашего бюджета, сроков, требований к качеству результата и пр.