Hiding divs on small devices with Bootstrap 3.1.0

Question

I need some help in hiding text on all devices smaller than desktops and larger. I am using Bootstrap 3.1.0. The code I'm using is here on CodePen.

Since mouses are not (usually) used on smaller devices to hover, I don't want the text in the <span> showing at all, just the links. When I use @media(min-width: 992px), it works fine on the desktop but on smaller devices the text in the <span> displays on smaller devices instead of the 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

You presumably need to set a default style for the span (and possibly the anchor and other elements). The "default" being the mobile device. For example, outside of your media query:

a.more_info_news span {
    display:none;
}

Answer 2

There are built in CSS-classes in Bootstrap that does the same thing as the CSS in the answer by w3dk.

If you plan to continue to use Bootstrap 3.1.0; use the visible and/or hidden classes like so: http://getbootstrap.com/css/#responsive-utilities

However, in the Alpha of Bootstrap v4 there is a .hidden-md-down-class that would do the exact thing you were looking for. Example from the alpha:

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

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