当行包含一定数量的列时，调用javascript函数

我正在开发一个MVC应用程序。其中一个页面包含一行和两列

当您将窗口调整到一定宽度时，它会自动将第二列置于第一列之下

我正在使用引导网格系统来实现这一点

        <div class="row">
            <div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
                ...
                (Some content)
                ...
            </div>
            <div id="releaseContainer" class="col-md-6 col-sm-6 col-lg-6" >
                ...
                (Some other content)
                ...

            </div>
        </div>

我想知道，当第二列位于第一列之下时，是否可能以某种方式触发事件，然后调用javascript函数

情况是，我有一些CSS类，应该根据是否有一列或两列来添加和删除它们

我希望你能明白

提前感谢

run1Style='draftContainer{background:d8ffc0}releaseContainer{background:eee}'； run2Style='draftContainer{background:eee}releaseContainer{background:d8ffc0}'； 功能控制{ 如果$'controlDM:visible'.length==0{ $'appendStyle'.appendrun1Style； }否则{ $'appendStyle'.htmlrun2Style； } } //首轮 控制 $document.readyfunction{ $window.resizefunction{ 控制 }; }; 1111 2222 我想帮忙

---

听起来你需要的是媒体查询，而不是解释

<div class="row">
    <div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
        ...
        (Some content)
        <input type="hidden" id="css1" value="<style>#draftContainer{background:#d8ffc0} #releaseContainer{background:#eee}</style>" />
        ...
    </div>
    <div id="releaseContainer" class="col-md-6 col-sm-6 col-lg-6" >
        ...
        (Some other content)
        <input type="hidden" id="css2" value="<style>#draftContainer{background:#eee} #releaseContainer{background:#f44336}</style>" />
        ...

    </div>
</div>
<div id="appendStyle"></div>

<script> 
  function control(){
    if($('body').width() > 766){
        $('#appendStyle').html($('#css1').val());
    }else{
        $('#appendStyle').html($('#css2').val());
    }
  }
  
  //first run
  control();
  
  $(document).ready(function() {
    $(window).resize(function(){
        control();
    });
  });
  </script>