jquery - jqxsplitter内のレスポンシブブートストラップパネル

Question

ブートストラップ パネルが 2 列構造に配置されるフィドルがあり、ウィンドウのサイズを特定のサイズに変更するとすぐに、垂直に積み重ねられます。これは絶対に必要なものです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel1"> Panel1 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel1">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel2"> Panel2 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel2">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
       
      <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel3"> Panel3 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel3">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>

            <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel4"> Panel4 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel4">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
    </div>
    
    <div class="col-md-6">
      
            <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel5"> Panel5 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel5">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
                  <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel6"> Panel6 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel6">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
    </div>
  </div>
</div>

今、同じブートストラップパネルをjqxsplitter内に配置した別のフィドルがあり、パネルのサイズが変更されたときに同じ動作が発生することを望んでいました

$('#toggleSearchPane').on('click', function(){
	var isExpanded = $('#nestedSplitter').data('expanded');
  if(isExpanded)
  	$('#nestedSplitter').jqxSplitter('collapse');
  else
    $('#nestedSplitter').jqxSplitter('expand');
});

$('#toggleErrorLogPane').on('click', function(){
	var isExpanded = $('#mainSplitter').data('expanded');
  if(isExpanded)
  	$('#mainSplitter').jqxSplitter('collapse');
  else
    $('#mainSplitter').jqxSplitter('expand');
});

$('#mainSplitter').jqxSplitter({
                width: '100%',
                height: 750,
                orientation: 'vertical',
                panels: [
                         { size: '85%', collapsible: false },
                         { size: '15%', collapsible: true }
                ]
            });
            
            $('#nestedSplitter').jqxSplitter({
                width: '100%',
                height: 750,
                orientation: 'vertical',
                panels: [
                         { size: '35%', collapsible: true },
                         { size: '65%', collapsible: true }
                ]
            });
            
  $('#mainSplitter').on('resize', function (event) {
      //displayEvent(event);
  });

  $('#mainSplitter').on('expanded', function (event) {
  		$(this).data('expanded',true);
      //displayEvent(event);
  });

  $('#mainSplitter').on('collapsed', function (event) {
  		$(this).data('expanded',false);
      //displayEvent(event);
  });
  
  $('#nestedSplitter').on('resize', function (event) {
      //displayEvent(event);
  });

  $('#nestedSplitter').on('expanded', function (event) {
      $(this).data('expanded',true);
      //displayEvent(event);
  });

  $('#nestedSplitter').on('collapsed', function (event) {
      $(this).data('expanded',false);
      //displayEvent(event);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<input id="toggleSearchPane" type="button" value="Toggle Search Pane" />

<input id="toggleErrorLogPane" type="button" value="Toggle Error Log Pane" />

<br /><br />
<div id='jqxWidget'>
    <div id="container-fluid" style="float: left; width: 100%; height: 100%;">
        <div id="mainSplitter" data-expanded="true">
            <div>
                <div id="nestedSplitter" data-expanded="true">
                    <div id="searchPane">
                        Search Pane</div>
                    <div id="infoPane" style="overflow:auto;">
                    <div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel1"> Panel1 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel1">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel2"> Panel2 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel2">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
       
      <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel3"> Panel3 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel3">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>

            <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel4"> Panel4 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel4">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
    </div>
    
    <div class="col-md-6">
      
            <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel5"> Panel5 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel5">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
                  <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel6"> Panel6 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel6">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
    </div>
  </div>
</div>
                        </div>
                </div>
            </div>
            <div id="msgPane">
              Messaging pane</div>
        </div>
    </div>
</div>

スプリッターのサイズを変更するときに、jqxsplitter 内で同じ応答動作を行う方法はありますか。どんな助けでも大歓迎です。ありがとう！！！