twitter-bootstrap - twitter-bootstrap-responsive を使用する簡単な方法はありますが、特定のケースでスタックを回避できますか?

Question

特定の形式のレスポンシブ デザインを取得しようとしています。twitter-bootstrap とそのレスポンシブ CSS を使用していますが、「自動スタック」機能を回避するのに問題があります。

デスクトップで表示したときに次の表示を実現しようとしています。

同様に、モバイルでも基本的に同じレイアウトが必要ですが、ボタンが積み重ねられるのではなく、押しつぶされます。私のhtml（画面が小さくなるとスタックする）は次のとおりです。

<div class = "row">
    <div class = "span12">
        <select class = "span2">
            <option> </option>
        </select>
        <input type="text" class = "input input-large span10" >
    </div>
</div>

<div class = "row">
    <div class = "span4">
        <button class = "btn btn-block btn-large btn-dial">1</button>
    </div>
    <div class = "span4">
        <button class = "btn btn-block btn-large btn-dial">2</button>
    </div>
    <div class = "span4">
        <button class = "btn btn-block btn-large btn-dial">3</button>
    </div>
</div>
<br>
<div class = "row">
    <div class = "span3">
        <button class = "btn btn-block btn-large btn-dial">A</button>
    </div>
    <div class = "span3">
        <button class = "btn btn-block btn-large btn-dial">B</button>
    </div>
    <div class = "span3">
        <button class = "btn btn-block btn-large btn-dial">C</button>
    </div>
    <div class = "span3">
        <button class = "btn btn-block btn-large btn-dial">D</button>
    </div>
</div>

CSSをハッキングせずにこれを達成する方法はありますか?