如何仅以一种分辨率隐藏显示模式？

有两个组件。第一个有一个ng-click并用第二个组件调用模态，一切正常。问题是模态只能在768分辨率下打开......

已经尝试使用媒体查询但没有成功..

谢谢！

这是代码：

父.html：

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" ng-click="$ctrl.openModal()">
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 benefit-parenthood">
        <div class="description">
            <p class='title'>lorem impsun title</p>
            <p class="area">
                <i class="fa fa-cookie-bite cookie-icon" aria-hidden="true"></i>
                <span class="area-item">lorem impsum</span>
            </p>
            <p class="area-mobile">lalala</p>
        </div>
    </div>
    <div class="hidden-xs col-sm-3 col-md-3 col-lg-3 container-image">
        <div class="partner-brand">
            <img src="app/assets/greyimg.png" class="partner-avatar">
        </div>
    </div>
</div>

parent.component.js：

(function () {
  'use strict';
  angular
    .module('parenthoodBenefit')
    .component('parenthoodBenefitComponent', {
      bindings: {},
      templateUrl: 'app/parenthood-benefit/parenthood.html',
      controller: parenthoodBenefitCtrl
    })    

  function parenthoodBenefitCtrl($scope, $uibModal) {
    this.openModal = function () {

      $uibModal.open({
        templateUrl: 'app/modal-benefit/modal.html',
        size: 'lg',
        controller: function ($scope, $uibModalInstance) {

          $scope.ok = function () {
            $uibModalInstance.close();
          };

          $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
          };
        }
      }).result.then(function () { }, function (res) { })
    };
  }
}());

模态.html：

<i class="fa fa-times icon-close" aria-hidden="true"  ng-click="ok()" ></i>
<access-detail-component></access-detail-component>