不一致的 JavaScript div 分配

Question

我正在使用Bootstrap的网格来组织网页的布局。在 lg 和 sm 大小之间，网页如下所示：

|col-1|col-2|

当窗口的大小在 xs 范围内时，列的堆叠方式如下所示：

|col-1|

|col-2|

相反，我希望它像这样堆叠：

|col-2|

|col-1|

---

为此，我创建了一个函数来切换div 标签的内部 BIB。它在某些时候有效，但偶尔 col-1 仍然高于 col-2。

function mobileHandler() {
    var width=window.innerWidth;
    if (width<768) {
        var col1=document.getElementById('col1').innerHTML;
        var col2=document.getElementById('col2').innerHTML; 
        document.getElementById('col1').innerHTML=col2;
        document.getElementById('col2').innerHTML=col1;
    } 
}
window.onload=mobileHandler;
window.onresize=mobileHandler;

是否有任何人都可以从我的代码中发现的错误？还是有更好的方法来实现我想要的？

Answer 1

只需使用引导程序的push和pull功能。

请参阅下面的代码片段。

.cols{
  height:50px;
  border:1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-push-8 cols">
      col-2
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8 col-md-pull-4 cols">
      col-1
    </div>
</div>
</div>

Answer 2

对 col-1 应用"右拉"

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 cols pull-right">
      col-md-4
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8 cols">
      col-md-8
    </div>
  </div>
</div>