jquery - div 列をブートストラップ タブのコンテンツに追加する

Question

次のようなX-tabs プラグインを使用して、ブートストラップ 3 タブとスタイルで作業します。

HTML :

<div class='tabs-x tabs-below'>
    <div id="myTabContent-2" class="tab-content">
        <div class="tab-pane fade in active" id="home-2">
            <div class="col-xs-4 col-md-2">
                <p>The FALSE Tabs</p>
            </div>
        </div>
        <div class="tab-pane fade" id="profile-2">
            <p>The True TaBs WORKED</p>
        </div>
    </div>
    <ul id="myTab-2" class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>

        </li>
        <li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>

        </li>
    </ul>
</div>

私はこのように新しいタブコンテンツを追加しますdiv:

<div class="col-xs-4 col-md-2"></div>

実際には、これdivはタブ外のコンテンツに表示され、機能しません。どうすればこの問題を解決できますか?!

DEMO FIDDLE (最初のタブを確認して問題を確認し、2 番目のタブは正常に機能しました)