One of the most useful tools regarding for responsible designs is "Flexbox", it is a super nice property that will make your boxes take advantage of the full width, resize and wrap as the view port size changes.
To turn a box into a flexbox it is simply enough to start with the property:
.myflexbox {
display: flex;
}
The first thing you'll realize is that instead of adding one box below the other it will order them to the right, and that's fine because that is its default.
Try adding that property to your set of boxes and resizing the window, you will experiment how boxes resize to the view port size, you can add a minimum size with min-width and boxes will not shrink further than that, however I would continue reading before assuming that min-width is the way to go.
Now, if you want that instead of resizing the boxes these get wrapped to the next line when the view port gets reduced then you'll use:
.myflexbox {
display: flex;
flex-wrap: wrap;
}
This way the render instead of resizing the boxes will wrap 'em to the next line maintaining your defined width.
Wrapping and resizing boxes is fun and useful, but you get picky as you move forward, and you want to control the order of your boxes depending on the view port size, and if you recall this post you should know already that a property can be applied depending on a media query, and the one you would like to use in this case is "order", for example if you want to change the order of pinky, thebrain and elvira when the view port is at least 960px the following is the way to go:
@media screen and (min-width: 960px) {
.pinky {
order: 3;
}
.thebrain {
order: 1;
}
.elvira {
order: 2;
}
}