jquery - 根据屏幕尺寸将 div 放置在特定列中

Question

我有以下布局:

<div class="row">

  <div class="col-lg-3 hidden-xs">
    Column 1
  </div>
  <div class="col-lg-4 col-xs-12">
    Column 2
  </div>
  <div class="col-lg-5 hidden-xs">
    Column 3
    <div id="important">This needs to be displayed</div>
  </div>
</div>

正如您所看到的，第三列中有一个额外的 div。我希望当页面以 xs 尺寸呈现时将其移动到第二列。我知道我可以复制它，但我不想这样做。有没有简单/更好的方法来实现这一点？

编辑:Bootply:http://www.bootply.com/FY98eVO6hC

Answer 1

获取 #important div 的 html 并在小屏幕上加载窗口时追加

function resize() {
    var docWidth = $(window).width();
    if (docWidth < 768){
        var getData = $('#important').html();
        $('.col-lg-3.hidden-xs #important').remove();
        $('.col-lg-3.hidden-xs').append('<div id="important">'+getData+'</div>');
    }
}

$(document).ready(function(){
    resize();

    $(window).resize(function() {
        resize(); 
    });
});