twitter-bootstrap - 列を押し下げるブートストラップ行テキスト

Question

Twitter ブートストラップ 3.0 を使用した単純なレイアウトで問題が発生しています。この問題は、コンテンツにテキストが多すぎてコンテンツが押し下げられた場合に発生します。物事を適切に構造化しているかどうかはわかりません。ここに私のHTMLがあります

<div data-bind="foreach: items" class="row">
        <div class="col-sm-4" >
            <div >
                <div>
                    <strong>Field:</strong> <span data-bind="text: Field"></span><br />
                    <strong>Field:</strong> <span data-bind="text: Field"></span><br />
                    <strong>Field:</strong> <span data-bind="text: Field"></span><br />
                    <strong data-bind="text: Field">Field</strong>
                </div>
                <div class="container">
                    <img class="img-rounded" data-bind="attr: { src: Field}" />
                </div>
                <div >
                    <button type="button" class="btn btn-danger btn-sm" id="dislike" >
                        <span class="glyphicon glyphicon-thumbs-down"></span>
                    </button>
                    <button type="button" class="btn btn-success btn-sm">
                        <span class="glyphicon glyphicon-thumbs-up"></span>
                    </button>
                    <audio class="audioStream" oncanplay="" preload="none">
                        <source src="" />
                    </audio>
                    <button type="button" class="btn btn-primary btn-sm audioPlayer">
                        <span class="glyphicon glyphicon-play audioPlayerIcon"></span>
                    </button>
                </div>
            </div>
        </div>

このような出力が得られることを期待しています（テキストが短い場合はそうします）

代わりに、次のように表示されます

3 つのレコードごとに class="row" で新しい div を作成することでおそらく問題を解決できると思いますが、実際にそうする必要はないと思います。おそらく、このユースケースではグリッドシステムを間違って使用しています。私の意図は、小さな画面で垂直になるレスポンシブ デザインを取得することでした。これが、テーブルを使用しなかった理由です。どんな助けでも大歓迎です。さらに情報を提供する必要がある場合は、お知らせください。