Hiding divs on small devices with Bootstrap 3.1.0

Question

I need help hiding text on all devices, smaller desktops and larger ones. I am using Bootstrap 3.1.0. The code I use is here in CodePen.

Since mice are not used (usually) on small devices for freezing, I don’t want the text in to <span>show at all, but only links. When I use it @media(min-width: 992px), it works fine on the desktop, but on smaller devices, text in is <span>displayed on smaller devices, not on links. Any idea what is wrong?

HTML:

<ul>
<li><a href="/analysis/the-real-goal-of-the-meeting.php" class="more_info_news">
<span><strong>Summary:</strong> Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Uterque enim summo bono fruitur, id est voluptate.
Ita ne hoc quidem modo paria peccata sunt.</span>The Real Goal of the Meeting</a></li>
</ul>

CSS

@media(min-width: 992px) {
    a.more_info_news {position:relative;z-index:24;color:#0F0FB6;text-decoration:none;}
    a.more_info_news:hover {z-index:25;background-color:#fff;}
    a.more_info_news span {display:none;font-size:small;text-decoration:none;}
    a.more_info_news:hover span {display:block;position:absolute;top:35px;width:350px;border:1px solid #000;background-color:#EDE9D3;color:#000;left:10px;visibility:visible;padding:5px;}
}

Answer 1

, , span (, , ). " " . , -:

a.more_info_news span {
    display:none;
}

Answer 2

CSS- Bootstrap CSS-, , CSS w3dk.

Bootstrap 3.1.0; visible / hidden : http://getbootstrap.com/css/#responsive-utilities

Alpha Bootstrap v4 .hidden-md-down, , . :

`@media (max-width: 991px) {
   .hidden-md-down {
    display: none !important;
  }
}`

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Answer 3

Bootstrap, @media .hidden-xs Hide div Extra Small Devices, Mobile

<div class="hidden-xs">
.
.
.
</div>