Current Situation
I have a <div class="span3"> for the left column and <div class="span9"> for the right column, when it is resized to a smaller size (on mobile or tablet), the span3 class on the left will be on top of the span9 class.
Desired Situation
I do not want it to collapse into just 1 column, cos I want to continue having 2 columns, even when it is being resized. It will be good if I can show it as a ratio of 1:11 on smaller screen sizes (eg. mobile/tablet) and continue having 3:9 on bigger screen sizes (eg. laptop/monitor)
May I know if this the desired situation is possible with Twitter Bootstrap's responsive design layout?
No, the desired situation is possible with Twitter Bookstrap's responsive layout.
BUT, it's not a hard thing to fix.
You're going to need to add another set of classes on the elements if you want this to occur on. By default all of the elements stack on mobile because a linear version is what we've come to expect. If you check out http://foundation.zurb.com/docs/grid.php you can see that Zurb have also created another set of styles based on a 4 column mobile grid. By adding these additional classes it allows you control your columns to occupy 1/3 1/2 2/3 full width.
If you ignore padding and margins, you would have something along these lines
.mobile-one {width: 25%;}
.mobile-two {width: 50%;}
.mobile-three {width: 75%;}
/* We've left this one off because it's the same style that is already applied
.mobile-one {width: 100%;} */
Then to your existing HTML you can add
<div class="span3 mobile-one">...</div>
<div class="span9 mobile-three">...</div>
or
<div class="span3 mobile-two">...</div>
<div class="span9 mobile-two">...</div>
EDIT
I've coded up a basic example for you to use -> http://playground.responsivedesign.is/twitter-bootstrap/
