Buttons Switching Places in Wide View But Returns To Normal Order in Narrower/Mobile View

Hi, when I increase my web page to a larger view-port size, my “Portfolio” button switches place from the center to the right, but when I decrease the view-port to a smaller size, the buttons, “About”, “Portfolio”, and “Connect” all return to the their regular order, of first, middle, and end. I don’t know why this is! Also, when the view-port is of a larger size the drop-down menu box for the “Portfolio” appears below the “Portfolio” button as it should, however, when the view-port is decreased, the drop-down menu box begins on top of the “Portfolio” button, obscuring it. Why is this?! See pictures below for better description:

Link here: https://codepen.io/IDCoder/pen/OWbXLw?editors=0100

You have a structure like

.row
  .col-sm-4 "About"
  .row "Portfolio"
  .col-sm-4 "Connect"

And that will do wierd things because there are now conflicting CSS rules.

cols go in in rows, so like

.row
  .col-sm-4 "About"
  .col-sm-4 "Portfolio"
  .col-sm-4 "Connect"

@DanCouper, thankyou for the aid…I figured out how I was messing up