Bootstrap grids not responsive on mobile device

Question

I'm using bootstrap grids for my layout. When I make the width of my browser smaller the grid elements rearrange to accommodate. However if I view the site on my phone, or set the browser view mode to mobile device in developer options on chrome, the grid elements don't move, everything stays put but reduces in size, so I end up with a really tiny version of my site.

for my grids im using:

<div class='row'>
    <div class='col-md'>content</div>
    <div class='col-md'>content</div>
</div>

Am I using the -md part incorrectly. I like the the point at which it breaks on the browser but does this affect mobile as well?

edit: Just to add some peculiarities about my site.

1. It's hosted on Github, ie. MyName.github.io
2. Issue only occurs with the online version, offline the grids rearrange fine.
3. Im using a domain to forward to my github address, ie. Myname.com -> myname.github.io

Just incase this can affect anything

Answer 1

Found the issue.

I am using a forward on my domain with masking to another address. This displays the site in an iframe in the original domain domain.

If i visit the domain i'm directing to directly, everything works dandy.