用响应式设计重新组织div

Question

我想知道如何使用响应式设计重新组织标题。

这是我的代码：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">NAME</div>
    <div class="span6">123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</div>
    <div class="span3">AVATAR</div>
  </div>
</div>

它看起来像我想要的水平模式（左边的名字，中间的长信息和同一行右边的我的头像）。 但在垂直模式下，我有3行，拥有这个组织会更好：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">NAME</div>
    <div class="span6">AVATAR</div>
  </div>
  <div class="row-fluid">
    <div class="span12">123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</div>
  </div>
</div>

由于我的包含NAME和AVATAR的div在垂直模式下可能符合相同的行。

我的应用程序中有很多这样的情况，在这种情况下，最佳做法是什么？我唯一看到的是用JQuery改变div命令，但我猜有更好的东西......？

谢谢！