Q:

How to force an update of a css selector inside context?

Let's say we have some CSS code:
.context-1 .test {
  background-color: #ff0000;
}

.context-2 .test {
  background-color: #00ff00;
}

.context-3 .test {
  background-color: #0000ff;
}

<div class="context-1">
    <div class="test">
        Hello, World!
    </div>
</div>

Works great. But if I'm trying to switch .context-1 to .context-2 - my div.test doesn't update it's background-color.
Why does the background color not update?   
I added a complete source code of such case, here it is:

<script>

var xs = [-Infinity, 768];
var sm = [768, 992];
var md = [992, 1200];
var lg = [1200, Infinity];

var width;

$(window).resize(function() {
 width = $(this).width(); 
 mediaQuery(xs, sm, md, lg);
});

function mediaQuery(xs, sm, md, lg)
{
    if (width >= xs[0] && width < xs[1]) {
        console.log("xs");
        hide_xs();
    }

    if (width >= sm[0] && width < sm[1]) {
        console.log("sm");
        hide_sm();
    }

    if (width >= md[0] && width < md[1]) {
        console.log("md");
        hide_md();
    }

    if (width >= lg[0] && width < lg[1]) {
        console.log("lg");
        hide_lg();
    }
}

function hide_sm() {
    $('#row').removeClass().addClass('xs');
}

function hide_sm() {
    $('#row').removeClass().addClass('sm');
}

function hide_sm() {
    $('#row').removeClass().addClass('md');
}
function hide_lg() {
    $('#row').removeClass().addClass('lg');
}
</script>
<style>
.xs .test {
  background-color: #ff0000;
}

.sm .test {
  background-color: #00ff00;
}

.md .test {
  background-color: #0000ff;
}

.lg .test {
  background-color: #ff00ff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="row" class="xs">
 <div class="test">
  Hello, World!
 </div>
</div>

A:

I created a JSFiddle and your code works. The only difference is how the information is logged.
function consolelog(message){
    var element = $("#log");
    element.append(message);
}

