Resizing Headings when Window Size Changes

Resizing Headings when Window Size Changes

I'm currently working on a website where I need to put some images and
some heading and description will be going along with it. If the browser
is full screen, the heading appears on a single line; however, if the
browser width is decreased, the heading automatically appears on two
lines.
Here's how it looks when the browser is full screen:

Here's how it looks when the browser width is decreased:

I want to make it so that the size of the heading is decreased when the
browser width is decreased and was wondering how I could do it. I wasn't
able to find any good resource on Google or I might just not be searching
with the right keywords.
I'm developing the website using Ruby on Rails with Bootstrap (2.3.2). I'm
also using SASS and jQuery, but I'm new to it.