AngularMaterial with Bootstrap 3 - twitter-bootstrap-3

Question

I am having a weird issue with responsiveness in my angular app. On one of my pages I have use the md-card and md-list directives inside a div with class col-xs-12:
<div class="col-xs-12 col-sm-12 col-md-12">
<md-card>
<md-card-header>
<md-card-avatar>
<i class="material-icons md-36"></i>
</md-card-avatar>
<md-card-header-text>
<div class="page-title-wrapper pull-left">
<h4 class="page-title">Quizzes</h4>
<div class="page-title-border"></div>
</div>
</md-card-header-text>
</md-card-header>
</md-card>
</div>
<div ng-repeat="quiz in vm.quizzes" class="col-xs-12 col-sm-6 col-md-4">
<md-card>
<md-card-header>
<md-card-avatar>
<i class="material-icons md-36" ng-bind-html="quiz.course.icon_font"></i>
</md-card-avatar>
<md-card-header-text>
<span class="md-title">{{ quiz.course.name }}</span>
<span class="md-subhead">{{ quiz.name }}</span>
</md-card-header-text>
</md-card-header>
<img ng-src="{{ quiz.course.banner_url }}" class="md-card-image" alt="Fundamentals of Networking">
<md-card-content>
<p>
{{ quiz.overview.substr(0, 100) }}{{ (quiz.overview.length > 100 ? '...' : '') }}
</p>
<div class="md-10 pull-left text-meta">
{{ quiz.start_date }} {{ quiz.start_time }}
</div>
<div class="md-10 pull-right text-meta">
{{ quiz.duration }}
</div>
<br>
<hr>
<div class="clearfix"></div>
<md-button class="md-raised md-primary md-12 md-btn pull-right">
<i class="material-icons md-14 pull-left margin-top-10"></i>
<span class="md-text pull-left">
Start Quiz
</span>
</md-button>
</md-card-content>
</md-card>
</div>
Now for some reason when the screen is resized the content is displaced, the container does not resize with the screen so most of the content is hidden by the body. It only displays properly after the page has been reloaded after a screen resize.
So currently as a fix I have put this in my code to refresh or reload the page each time the screen resizes:
/* Reload APP on screen resize */
$(window).bind('resize', function(e)
{
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function()
{
this.location.reload(false); /* false to get page from cache */
}, 100);
});
However I am not satisfied with the screen reloading like this so I would like to know why this is happening and how I can fix it.