Css 使用引导-将列更改为行

我有一个布局，包括一行三列。每列有3个垂直列出的项目。我正在使用引导

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

某物
https://something.com 
没有什么
https://nothing.com/
一切
https://everything.com/

当行以767px的速度折叠到400px左右时，布局会感觉不正确，因为单个列不能很好地填充空间。在这种情况下，我希望它显示在左边的图像和标题和网址的权利，好像它是这样的

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

某物
https://something.com 

这可以通过css和媒体查询来实现吗？还是我必须深入研究一些javascript

---

感觉好像我应该能够使用display设置一些东西，但我还没有找到一个有用的神奇组合。

请检查结果：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@介质（最大宽度：400px）{
.col-xs-6{
宽度：100%；
}
}
.行{
边缘顶部：15px；
}

某物
https://something.com 
没有什么
https://nothing.com 
一切
https://everything.com 

这是一个非常好的解决方案，在您的示例中效果很好，但在我的实际代码中不会切换回400px。一定是某个地方有输入错误。另外，如何设置代码示例以使其像您在这里所做的那样工作？@marcp您能给我一个指向您实际页面的链接吗？@marcp the code

@media（最大宽度：400px）{.col-xs-6{width:100%；}

应该在bootstrap.css的链接后面。@marcp我认为关键在于样式定义的顺序。1） 链接到bootstrap.css。2） 为我们自己覆盖它。