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

i'm setting off-the-shelf shopping cart responsive design template. have section horizontally oriented larger viewports , vertically oriented smaller devices. want use copy says "see right [whatever]"... on smaller device, isn't "to right" rather underneath. i'd make dynamically "see below" when viewport changes.

possible? , simple? don't want mess of code myself or other furture admin going have adjust if want reword it. if can done simple or whatever code contained in css that's fine.

otherwise i'll accept "no" if that's better answer.

you can using media query , following approach.

declare 2 spans having desired data, 1 large screens , other smaller ones:

<span class="lg-view">see right</span> <span class="sm-view">see below</span> 

in css, display lg-view span default , hide other one:

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

then inside media query, reverse above styles:

@media screen , (max-width: 500px) {     .lg-view{        display:none;     }      .sm-view{        display:inline-block;     } }