twitter-bootstrap - 使用响应式设计重新组织 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>

因为我的 div 包含NAME并且AVATAR可以在垂直模式下适合同一行。

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

谢谢 ！