В адаптивной верстке тоже ничего сложного - создаешь дополнительные таблицы стилей, в которых используешь медиа-запросы с параметром screen и min-width/max-width. И, в зависимости от разрешения экрана, изменяешь параметры отображения каждого элемента, который выглядит "не так".
Потом можно попробовать верстать, изначально опираясь на сетки - эти ваши бутстрапы и т.д., тут тебе даже не придется писать дополнительных стилей, вся верстка сведется к прописыванию классов элементам, еще на стадии разметки страницы в html.
Скрывать блок, по которому совершалось нажатие, рожать на его место блок, в котором ссылки на соответствующие протоколы / или ссылка вида "href=tel:89991234567", а телефон уже сам предложит все приложения, способные обрабатывать телефонные номера.
Что-то похожее у меня на vikont23.ru, "связаться с офисом"
Предположу, что например в jquery это делается так:
- Онклик на на кнопку
- Удаление тега img, добавление своего мобильного своей картинкой
- То же и для наименования (не понял, где оно)
Написать пример кода не могу, с телефона.
Оно не будет работать, т.к. ты присоединяешь уже готовый html-код, в котором вычисление не выполняется.
$("div").attr("id", calk) - вот так вот, если не ошибся, будет присваиваться id со значением из переменной calk. Как увеличить исходный (числовой?) id на величину calk - не знаю. Справка по .attr
Кажется, как-то так. Проверяем ширину окна, ежели меньше 450 - удаляем первый дочерний div блока с id="Camera", затем добавляем html-код перед первым (оставшимся) дочерним блоком.
Можно довести до ума, реализовав именно замену, как у Илья Белобородов , но сам еще недостаточно разбираюсь.