Bootstrap表單佈局（移動和桌面中元素的不同順序）

Question

我具有Mobile和Desktop版本中元素順序不同的表單。

我使用Bootstrap和LESS。這些工具可以完成這項任務嗎？ 也許JQuery應該有所幫助？

這是我在手機和桌面視圖中需要具備的。

請指教。

Answer 1

我找到了我的問題的答案。 例如，第四個元素的id是#four 我們需要在適配頁面時移動此元素。 然後我們就可以使用這個jQuery腳本：

function updateAreaFour() { 
    $(document).ready(function() { 
    function updateContainer() { 
    if ($(window).width() > 992) { 
     var buttonArea = $("#four"); 
     $("#second").append(buttonArea); 
    } else { 
     $("#four").insertAfter("#three"); 
    } 
    } 
    updateContainer(); 
    $(window).on('resize',function(){ 
    updateContainer(); 
    }); 
}); 
} 

Answer 2

ü可以通過COLS命令他們，像這樣的：這是簡單的JavaScript：

<script> 
    window.onresize = function(){ 
     if(window.innerWidth < 768){ 
      var a = document.getElementById('a'); 
      a.innerHTML = '<div class="form-group col-md-4 col-xs-12"><label> name 3:</label><input type="text" class="form-control" name="fname">'; 
      document.getElementById('b').innerHTML = ''; 
     }else{ 
     var b = document.getElementById('b'); 
      b.innerHTML = '<div class="form-group col-md-4 col-xs-12"><label> name 3:</label><input type="text" class="form-control" name="fname">'; 
      document.getElementById('a').innerHTML = ''; 
     } 
    } 
</script> 

和HTML是這樣的：

<div class="form-group col-md-4 col-xs-12"> 
       <label> name1 :</label> 
       <input type="text" class="form-control" name="fname"> 
      </div> 

      <div class="form-group col-md-4 col-xs-12"> 
       <label> name 2:</label> 
       <input type="text" class="form-control" name="fname"> 
      </div> 
      <div id="a"> 

      </div> 
      <div class="form-group col-md-4 col-xs-12"> 
       <label> name 4:</label> 
       <input type="text" class="form-control" name="fname"> 
      </div> 
      <div id="b"> 
       <div class="form-group col-md-4 col-xs-12"> 
        <label> name 3:</label> 
        <input type="text" class="form-control" name="fname"> 
       </div> 
      </div> 

調整屏幕和看到的變化！