Using bootstrap - change a column to a row - css

Question

I've got a layout which includes a row with 3 columns. Each column has 3 items listed vertically. I'm using Bootstrap.
<div class="row">
<div class="col-sm-4 ">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>NOTHING</h3>
<div class="url"> https://nothing.com/</div>
</div>
<div class="col-sm-4 appcontainer">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>EVERYTHING</h3>
<div class="url"> https://everything.com/</div>
</div>
</div>
When the row collapses at 767 px down to about 400 px the layout feels wrong as the individual columns don't fill the space very well. In that case I would like to have it displayed with the image on the left and the header and url on the right as though it were like this..
<div class="col-sm-4 ">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
</div>
</div>
Can this be accomplished with css and media queries? Or do I have to dig into some javascript?
It fells like I should be able set something up using display, but I haven't found a magic combination that does anything useful.

Answer 1

Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (max-width: 400px) {
.col-xs-6 {
width: 100%;
}
}
.row {
margin-top: 15px;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>NOTHING</h3>
<div class="url"> https://nothing.com </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>EVERYTHING</h3>
<div class="url"> https://everything.com </div>
</div>
</div>
</div>
</div>
</div>