Change actual text (easily?) based on screen width?

One way would be to use pseudo elements and media queries. You could do something like this:

HTML:

<div><!-- empty by design --></div>

CSS:

@media screen and (max-width: 300px) {
  div:before {
    content: "see below for [whatever]";
  }
}

@media screen and (min-width: 301px) {
  div:before {
    content: "see to the right for [whatever]";
  }
}

Obviously this is just a bare bones markup, but with a bit of tweaking it should do exactly what you want.

You can do this using media query and the following approach.

Declare two spans having the desired data, one for large screens and other for smaller ones:

<span class="lg-view">See to the right</span>
<span class="sm-view">See below</span>

In css, display the lg-view span by default and hide the other one:

.lg-view{
   display:inline-block;
}

.sm-view{
   display:none;
}

Then inside media query, reverse the above styles:

@media screen and (max-width: 500px) {
    .lg-view{
       display:none;
    }

    .sm-view{
       display:inline-block;
    }
}