Jump to next line a neested column in bootstrap3 - html

Question

I have a problem dealing with nested columns in bootsrap 3. The thing is that I have a background image and a text floating to the right like this:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 test">
<div class="row">
<div class="col-sm-6 col-sm-offset-6 col-md-6 col-md-offset-6 col-xs-12">
<div class="description">
<p>
TEXT DESCRIPTION
<button type="button" class="btn btn-primary">sTART</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
The test class is to added to have a background-image to that div.
.test {
background-repeat: no-repeat;
background-size: 100% 100%;
height: 300px;
background-image: url("../img/imgage.jpg");
}
What I want is to break to a new line when displayed on a mobile screen the nested column that contains the TEXT DESCRIPTION; more precisely this part of code:
<div class="row">
<div class="col-sm-6 col-sm-offset-6 col-md-6 col-md-offset-6 col-xs-12">
<div class="description">
<p>
TEXT DESCRIPTION
<button type="button" class="btn btn-primary">Start</button>
</p>
</div>
</div>
</div>
So the TEXT DESCRIPTION jumps below the background image in a new line.
PS: I don't want to use the same code with two different divs and control the with the responsive utilities eg: hidden-xs.
Here is a link to the Plunker for what I did so far:
Plunker code example