You already have a page layout mockup and you know you are using Bootstrap, so there are really 3 ways to go forward from here:
Traditional — redo your page layout mockup as a set of responsive page layout mockups in a handful of sizes, all using a grid that is similar to the Bootstrap grid
Modern — use a responsive design tool like Tumult Hype, which enables you to create a responsive design on a grid that is similar to the Bootstrap grid with optional animations and interactivity that can be exported as a mockup and/or an HTML prototype
Native — hand-code an HTML prototype using the Bootstrap template itself, so that you can create your responsive design natively in HTML with the actual Bootstrap grid, doing as little coding as possible and zero optimizations (e.g. put your image assets in at full size, target only one browser) and create mockups by taking screenshots on the target devices themselves or using a tool like Fake that can capture browser renderings at various sizes
Depending on the project, I use either the Modern or Native approach. If the layout and animations are simple, I use the Native approach so that I get into the browser right away, and focus my design efforts on making great assets that work within a simple responsive grid. If the project demands complicated layouts and animations, I use Hype so that I can focus on the layouts and animations in a very creative way, and then export an updated prototype at the end of each day.
Prototypes are so much easier to share with team members than mockups. Put the prototypes on a private development server, and everyone can browse them, see animations, compare on various devices. And you can always render a mockup from the prototype when you need them.
There is a Responsive Design Mode in the Safari browser that shows the current page at a bunch of sizes and is really helpful, and there is probably a Chrome extension that does the same thing.
As for how you adapt your designs to each size, I recommend you be aggressive in making changes that suit that particular size. Yes, definitely use flat color areas in a small size and replace them with background images in a bigger size. You can even make the smaller sizes basically image-free. And you can add additional explanatory text blocks in the larger size that are hidden at the smaller sizes.
Definitely think of the phone size as the main size, and the bigger ones are enhanced versions of the phone size that grow to take advantage of the additional screen space and bandwidth. It’s not only psychologically easier, it is the truth based on the numbers of devices because phones way outnumber everything else.
Keep in mind the phone use case might be on an elevator. What you want to show and how you show it should be tailored to not only the size but what the user of that size expects and requires.
Which exact sizes you design for is up to you, because it has a lot to do with the design you have created. I like to think in terms of a 4–8 inch phone/tablet layout that is like a minimalist paperback book, a 9–15 inch tablet/notebook layout that is like a rich coffee table book, and a 1920x1080 desktop/TV layout that is like a poster. Then the standard 1:1 version of the desktop/TV layout is an HDTV and the Retina 2:1 version is a 4KTV.