Отображение разной верстки на разных разрешениях. Как правильно?
1. Класс hidden-xs это display: none. В свою очередь, display: none - Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. Следовательно пользователю изображения не прогрузятся.
2-3. Тут как душе угодно. НО!!! Ни есть хорошо, когда существует две вёрстки с одинаковым контентом. Я бы со стилями повозился. Да, это займёт больше времени, но зато и профит получишь, и код чище станет, и к карме +100 будет))
boostrap решает все эти вопросы, но загромождает код, и тут вопрос сколько таких скрытых блоков, если это 1 - 2 блока - то в чем проблема?
Можно еще сделать динамическую подргузку части блоков, после загрузки страницы в js получать размеры дисплея и слеать ajax, который вернет блок именно для этого размера, пока идет ajax можно какой-то лоадер вставить вместо блока
Ну и если шаблоны совершенно разные, то можно на сервере определять устройство и под разные устройства генерить разные шаблоны. Нет гарантии, что устройство верно определиться, но иногда это единственный вариант.
Еще вариант - делать прелоадер и пока он там красуется, делать ajax и получать нужный контент. Различия версий можно разрулить через поддомены.
В любом случае, надо смотреть на весь проект. Ибо решений много, но только одно из них оптимально для Вашего случая.