不一致的JavaScript div分配

我使用引导的网格来组织网页的布局。lg和sm尺寸之间的网页如下所示：

| col-1 | col-2 |

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

| col-1 |

| col-2 |

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

| col-2 |

| col-1 |

---

为此，我创建了一个函数来切换div标记的内部HTML。它在某些时候起作用，但偶尔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;

函数mobileHandler（）{
变量宽度=window.innerWidth；
如果（宽度只需使用引导的
push
和
pull
功能

请参阅下面的代码片段


.cols{
高度：50px；
边框：1px纯黑；
}

col-2
col-1
将“向右拉”应用于列1



col-md-4
col-md-8
检查可能的副本