Bootstrap Accordion doesn't work with -xs-column sizes

I created an accordion in my local Bootstrap site. I have created three columns in folding href with classes col-md-5, col-md-3 and col-md-2. At this point, the link is still clickable and the accordion is fully functional, it just looks bad on mobile devices. So I add the col-xs-5, col-xs-3 and col-xs-2 classes to the previous classes and now when the new classes are styling the accordion the link doesn't click. I even tried to remove the -md classes, but I think it has something to do with the -xs classes. Does anyone know if the accordion doesn't support suppord -xs-classes?

Here's my markup:

<div class="panel-heading">
    <div class="row">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <div class="col-xs-5 col-md-5">Introduction to the Linux Academy</div>
                <div class="col-xs-3 col-md-3 difficulty">Beginner</div>
                <div class="col-xs-2 col-md-2 time">01:00:36</div>
                <div class="col-md-2">
                   <a href="course-sub.php">
                      <button type="button" class="btn btn-default">Course Details!</button>
                   </a>
                </div>
            </a>
       </h4>
    </div>
</div>

      

        
        
        
      

    

Thank!