Fix layout for small screen devices

So bootstrap lumps everything with less than 768px in the same "xs"
category.  This is annoying when the mobile device is turned to
landscape mode, and is larger than 320px but smaller than 768px.  I'd
rather they have a separate category for pure mobile, and then retain
"xs" for 320-768px.  One possible way around this (read: hack) is to
override the "sm" to incorporate everything between 321-768px, and give
"xs" that one pixel (320px).  Which is what I've done… probably a very
bad idea.

Also, update the elements to line up correctly in small device screens.