bootstrap скрыть класс для телефона

Убрать класс средствами бутстрапа - нельзя. Можно либо обнулять стили класса при @media в CSS, либо убирать класс с помощью javascript.

Стилями - можно сделать так:

# your-styles.scss
.block.your-class {
  # ваши стили для блока с классом
  @media(max-width: $screen-xs-max) {
    # стили, обнуляющие стили для блока с классом
  }
}

Где $screen-xs-max - SASS-переменная бутстрапа, в ней хранится ширина xs-экранов.

Если вы пишете стили в CSS - значения переменных можно взять здесь, и построить стили так:

# your-styles.css
.block.your-class {
  # ваши стили для блока с классом
}
@media(max-width: 767px) {
  .block.your-class {
    # стили, обнуляющие стили для блока с классом
  }
}

С помощью javascript, так:

$(document).ready(function() {
  var $block = $('.your-block');
  if ($block.length) {
    $(window).resize(function() {
      if ($('.device-xs').is(':visible')) {
        $block.removeClass('your-class');
      } else {
        $block.addClass('your-class');
      }
    });
  }
});

При ресайзе окна - проверяем, виден ли особый блок .device-xs, и если виден - класс у блока убираем, иначе - добавляем.

Чтобы код работал - в верстке нужно разместить этот особый блок (можно сразу все бутстраповские):

<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>

Глядя на все эти device-xx блоки и хитрости с :visible можно задаться вопросом: "Почему я не могу просто сравнить ширину экрана с 767px прямо в javascript? Ответ - потому что в таком случае будут погрешности, как правило из-за ширины скролла на странице. Если нужно точное совпадение с @media-запросами бутстрапа - лучше решить это с помощью хитрости выше.