Why are these bootstrap columns stacking on xs displays?

Hey everyone, I am trying to get 3 bootstrap columns to sit side by side inside a row which is inside of another row/column. Everything looks great until I size down to xs, then the username, stream name, and roundish columns stack. I read the bootstrap documentation, but all it said was to make sure your columns add up to 12. Mine do, but this is still an issue with an xs screen. I have even tried having them add up to less than 12 with no luck. What am I doing wrong? 2nd question, I put an .addborder class on a column surrounding the columns stated above, and its just slightly bigger than the columns in rows above it. What is going on here? Why are they not the same width?

Codpen: http://codepen.io/InfiniteSet/pen/PpzKxX

.col-xs-* is no longer valid in Bootstrap 4. Instead you should use .col-*

In case you didn’t meant to use Bootstrap 4:

For your second question: You will have to remove the .no-gutters on the outside row and apply the addBorder to the nested row.

That did the trick. My fault for not reading the BS alpha docs more thoroughly. Thank you, I appreciate the help!