Columns wrapping down in when browser width is too small - css

Question

I'm looking to make a small sidebar using Twitter Bootstrap.
I want the paragraph text to be able to wrap freely and I always want the buttons on the right side. 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?
Basically, I'm looking at code like this:
<div class="container">
<div class="row" style="margin-top: 10px;">
<div class="span9 citation-text">
<p class="citation-text">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.</p>
</div>
<div class="span3 vertical-btn-group citation-options">
<input type="button" class="btn btn-small btn-block btn-info citation-edit"
value="Edit" /> <input type="button" class=
"btn btn-small btn-block btn-danger citation-remove" value="Remove" />
<input type="button" class=
"btn btn-small btn-block btn-warning citation-highlight" value="Highlight" />
</div>
</div>
</div>
Here is the link to the JSFiddle:
http://jsfiddle.net/F39R8/
Play around with resizing and you'll see what I'm talking about.

Answer 1

Once the browser is resized to less than 768px, Bootstrap sets all columns (span*) widths to 100% and removes the 'float' which makes the spans stack vertically. You can override this using a #media query in your CSS..
#media (max-width: 767px) {
.row .span9 {
float:left;
width:68%;
}
.row .span3 {
float:left;
width:28%;
}
}
http://jsfiddle.net/skelly/F39R8/2/

Answer 2

I only recently began using CSS myself so I am not sure that this is the best way to go about this but it seemed to help when I tried overriding the CSS for that link you gave above: Go into the CSS stylesheet and find the section pertaining to that div tag (it appears to me to be called "#actions"). Put in min-width: 800px; and try to resize the browser window. Then adjust the pixel size to something like 400px and resize again just for comparison. By fine-tuning this you can (hopefully) get the desired behavior you are looking for.

Answer 3

Try this: http://jsfiddle.net/F39R8/3/
I see you have the proper Bootstrap CSS classes in place, so I assumed that the bootstrap file you included contains CSS for the responsive layout. I removed it and added the non-responsive version (http://twitter.github.io/bootstrap/assets/css/bootstrap.css).