Мой Вам совет, если не хотите использовать бутстрап полноценно, то просто учитесь у него.
bootstrap-ru.com/scaffolding.php#responsive
Ссылка как просили, на русском.
Начать следует с того, что надо задать медиа-запрос и сделать с его помощью что-нибудь, например изменить размер шрифта. Изменить размер основного контейнера и скрыть какой-нибудь блок.
На этом этапе Вы въедете как это работает, а дальше уже смотрите на свой шаблон и смотрите что надо сделать с теми или иными блоками для того, чтобы он выглядел так, как у Вас на втором скрине.
Пишете в head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
В css пишете
@media (max-width: 480px) {
p {
color:red;
}
}
Что означает данный код - при уменьшении ширины до 480px весь текст будет красным. Если работает - идите дальше, уже думайте над тем, что надо сделать в Вашем конкретном случае.
Измените размер области со страницей и все увидите
codepen.io/iiil/pen/sALCb 