Bootstrap бесит, поэтому:
(Не важно бутстрап или нет) Нужно внимательно рассмотреть все макеты дизайнера для разных размеров экранов для того, чтобы понять, какие блоки как себя должны вести.
Блоки могут перестраиваться, а могут одни скрываться, а другие показываться.
Дальше писать эти блоки.
Рассмотрим ваш пример, без учета сайдбара, просто частный случай шапки.
Первая строка, header
Я люблю display:flex, если не нужна поддержка древностей, то прекрасно подойдет. (Да, он пока несовершенен, но сейчас не об этом)
У флексбоксов есть чудное свойство order, позволяющее менять порядок следования элементов.
Внутри header'а можно сделать 4 блока или 3. Если 3, то средний, в свою очередь, будет состоять из 4-х блочиков, которые на маленьких экранах тоже перестроятся в столбик: 2 телефонных номера, затем фраза про СПб, затем кнопка (кнопке зададим order так, чтобы она стала последней).
И в соответствующих media регулируем ширину, отступы, order у вложенных блоков и flex-wrap, flex-direction у оберток.
Если все таки бутстрап, то все аналогично, только манипулируем добавлением соответствующих классов.
Главное, чтобы в голове была готовая логика поведения блоков. Дальше дело техники.
И целесообразнее, чтобы адаптив делал тот же человек, что и начальную верстку.
