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

Question

I'm setting up an off-the-shelf shopping cart with a responsive design template. I have a section that is horizontally oriented with larger viewports and vertically oriented with smaller devices. I want to use copy that says "see to the right for [whatever]"... but on a smaller device, it isn't "to the right" but rather underneath. So I'd like to make it dynamically say "see below" when the viewport changes.

Possible? And simple? I don't want a mess of code that myself or other furture admin are going to have to adjust if they want to reword it. But if it can be done with a simple or whatever with all the code contained in css then that's fine.

Otherwise I'll accept "no" if that's the better answer.

Answer 1

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;
    }
}

Answer 2

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.