Bootstrap responsive panel with thumbnails and custom content, not exactly responding as expected - html

Question

So I'm in a coding Boot camp, been coding for a little over 1.5 months. For one of my assignments, I was to create a mobile responsive portfolio using Bootstrap. The directions clearly stated not to use media queries, as the queries are under the hood on of my TAs told me. Inasmuch as I'm not allowed to implement explicit use of queries, I seem to be stumped. I already turned the assignment is, but dont want to skim ovedr the solution - if there is one. Here is my html:
<div class="container" id="page">
<div class="row">
<div class="col-md-8 col-xs-12">
<div class="container-fluid">
<div class="panel" id="main-section">
<div class="panel-heading">
<h4 id="headings">Portfolio</h4>
<div class="row" id="box-search">
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="hangman.jpg" class="image-responsive" id="images-left">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff" id="text-box">Hangman</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="rpg.jpg" class="image-responsive" id="images-right">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff">Role Player Game</p>
</div>
</div>
</div>
</div>
<div class="row" id="box-search">
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="trivia.jpg" class="image-responsive" id="images-left">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff"`enter code here`>Trivia</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="rutgers.jpg" class="image-responsive" id="images-right">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff" id="text-box">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
<div class="row" id="box-search">
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="rps.jpg " class="image-responsive " id="images-left">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff;" id="text-box">Rock Paper Scissors</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and the css:
.thumbnail {
position: relative;
}
.caption {
position: absolute;
top: 75%;
left: 0px;
width: 190px;
text-align: center;
}
#images-left,
#images-right {
height: 190px;
width: 190px;
}
/*portfolio styling*/
#main-section-port {
min-width: 300px;
max-width: 640px;
float: left;
background-color: #ffffff;
margin-bottom: 80px;
}
and here is a link to the actual website if you'd like to see: afflatus480.github.io
Again, I already submitted the work, so no need to rush. But any help will be appreciated nonetheless. Thank you for your time.