title: Columns wrapping down in when browser width is too small
body: <p>I'm looking to make a small sidebar using Twitter Bootstrap.</p>
  
  <p><strong>I want the paragraph text to be able to wrap freely and I always want the buttons on the right side</strong>. However, whenever the browser is resized from full screen to have a smaller width the vertical button group drops down to the next row and takes up the width of the while window. Ugly. What can I do to change this?</p>
  
  <p>Basically, I'm looking at code like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row" style="margin-top: 10px;"&gt;
      &lt;div class="span9 citation-text"&gt;
        &lt;p class="citation-text"&gt;Here is a ton of text that is supposed to be a citation
        but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap
        so it looks like I'll have to keep writing and writing until it does.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="span3 vertical-btn-group citation-options"&gt;
        &lt;input type="button" class="btn btn-small btn-block btn-info citation-edit"
        value="Edit" /&gt; &lt;input type="button" class=
        "btn btn-small btn-block btn-danger citation-remove" value="Remove" /&gt;
        &lt;input type="button" class=
        "btn btn-small btn-block btn-warning citation-highlight" value="Highlight" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the link to the JSFiddle:</p>
  
  <p><a href="http://jsfiddle.net/F39R8/" rel="nofollow">http://jsfiddle.net/F39R8/</a></p>
  
  <p>Play around with resizing and you'll see what I'm talking about.</p>