通过Ajax创建包含两列和内容的垂直选项卡

Question

我正在尝试使用左侧的标题面板创建两个列布局，并在右侧列上加载远程内容，如附图所示。

这张图片的内容是通过jQuery加载的：

有关如何使用双列标签布局实现相同结果的任何简单建议/示例？

<div class="row table-responsive">
        <div class="col-xs-12  col-sm-6 col-md-6 col-lg-6 table-responsive">

            <div class="tab-content" id="accordion1">
              <div class="tab-pane active">
                <div class="sbox c01"> <span class="tab-box-title">Title 1</span><span style="display:none" class="post-des"> 
                  <!--END TEXT FOR BOX 0--> 
                  <!-- START TEXT Right Panel - BOX 0-->
                  <p id="tab1"> </p>
                  </span> </div>
                <!--START TEXT FOR BOX 1--> 
                <!--    END TEXT RIGHT PANEL  - BOX 2-->

                <div> </div>
              </div>
              <!-- Right Panel--> 
            </div>

        </div>
        <div class="col-xs-12  col-sm-6 col-md-6 col-lg-6" id="post-text">
          <div class="process-item delay5 animate fadeInLeft">
            <div class="tab-text" id="tab-text-bkg">
              <h3></h3>
              <p class="font-m detail-post"></p>
            </div>
          </div>
        </div>
      </div>

更新： 每当我将手风琴分成2列时，内容都不会加载。 作为临时解决方案，我创建了一个选项卡面板，并为选项卡和手风琴分配了不同的媒体查询，并使用2个不同的脚本从外部文件加载内容。这可能不是最优雅的方式，但现在它似乎工作。 手风琴中的内容通过js加载：

$( "#accordion_post" ).accordion({
collapsible: true, active: false
});

$("#accordion_post").on("click", "dd", function (event) {
 $("div.active").slideToggle("fast");
 $(this).find(".content").slideToggle("fast");
 });

$.post("acc_mobile/_content.html",function(postresult){
$("#pan1").append(postresult);
});

$.post("acc_mobile/_content_4.html",function(postresult){
$("#pan2").append(postresult);
});

$.post("acc_mobile/_content_3.html",function(postresult){
$("#pan3").append(postresult);
});

$.post("acc_mobile/_content_2.html",function(postresult){
$("#pan4").append(postresult);
});