Юрий

если хотите оптимизировать и размер и запросы, то надо понимать какие размеры используются юзерами часто.

если они почти всегда не только пролистывают все средние картинки но еще и почти всегда на весь экран разворачивают все, то понятно вариант 2.
но что-то мне подсказывает что все картинки пролистает дай бог если половина юзеров, а на весь экран так развернут не более 1-5% картинок. тогда очевидно 1.

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

для п1 есть img srcset

бутстрап не поддерживает из коробки несколько одновременно открытых модальных окон.

погуглите какие костыли надо вставить чтобы заработало.

хотя я бы на вашем месте подумал как обоитись без второго модала.

плохо тем что дизайн хардкодится в хтмл. представим что у вас сайтик на неск десятков страничек. и вдруг меняется дизайн, например сайдбра был 4 колонки стал 3.
если бы у вас там был был класс "sidebar" то вы бы просто поменяли в css его ширину в разных разрешениях. а когда у вас col-md-4 то вам нужно перелопатить вручную все шаблоны...

ps я и сам его использую, но у меня все это в шаблонизаторах, поэтому дублирования кода нет, и все меняется в одном месте. но не везде это так.

раньше был zencss сайт, где одна разметка и сотни вариантов дизайна. вот к такому следует стремится. хтмл - только контент, а css - дизайн

Бутстрап тоже можно скомпилить на 24 колонки