Basic Tip Calculator

For some reason it's been [more than] a little difficult than usual figuring out how to use Bootstrap's pre-defined grid system to re-arrange the website depending on the screen size and I am not sure why. I expect that when col-* is used with the applicable breakpoint shortcut together with a number, the grid and items should change: for example, col-sm-4 rearranges the grid into 4 columns, but at a different, smaller size than col-lg-4. However I have been unable to ascertain whether this works on the children of the HTML tag only, but not on any further descendants.

I would appreciate and duly acknowledge any help I could get on this!