I have a grey box and I want it to be responsive like the boxes below it. but for some reason it only gets resposive when it gets smaller. below is my code and the link to the site. try minimizing your screen and you will see how it ONLY gets responsive at the small size instead of at all size of the window.

Code:
<a href="javascript:void(0);" id="displayText"> 
      
        <div class="col-md-4 col-xs-12 greyTab search-style visible-xs">
          
                
                    <div class="col-xs-1">
                          <img style=" margin-bottom:30px;" class="flip" src="/frontimages/seach_img.png" name="magnifyingglassicon"     id="magnifyingglassicon"  width="15"> 

        
                    </div>
            
                <div class="col-xs-11" style="white-space:nowrap">

                    <div >
                    <div style="line-height:17px"> Teaches: <?= ucwords($this->subject); ?> <br> </div>
                    <div style="line-height:17px"> Learning: <?php echo $this->advancedSearchLearn;?> <br> </div>
                    <div style="line-height:17px">Near: <?= $this->zip; ?>    <br> <br> </div> 
                    </div>
                </div>
               
    
            <div class="col-md-6">
                  <i class="fa fa-chevron-down fa-1x"></i> 
            
          </div>
      </div>  <!--END GREYTAB-->     
    </a>
NOTE: THE GREY BOX ONLY APPEARS ON MOBILE SO TRY MINIMIZING THE SCREEN TO ABOUT A VIEWPORT SIZE OF 680 ISH....

http://test01.lrngo.com/online-tutor...hool/n/trade/1