Bootstrap 表单布局（移动和桌面中元素的不同顺序）答案

【问题标题】：Bootstrap Form Layout (different order of elements in Mobile and Desktop)Bootstrap 表单布局（移动和桌面中元素的不同顺序）
【发布时间】：2017-03-05 16:25:29
【问题描述】：

我的表单在移动版和桌面版中具有不同的元素顺序。

我使用 Bootstrap 和 LESS。是否有可能使用这些工具来完成这项任务？也许 JQuery 应该有帮助？

这是我在移动和桌面视图中所需要的。

请指教。

【问题讨论】：

在纯 CSS 中不可能，您必须使用 javascript 并手动附加它。

标签： jquery html css forms twitter-bootstrap

【解决方案1】：

你可以按 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>

调整屏幕大小并查看更改！

【讨论】：

但在桌面视图中，第四个元素应该在第三列。这就是问题
你是什么意思？对于每个输入，您都应该使用上面的 html，一切都会好起来的，那么有什么问题？
对于手机 - 我有从上到下的顺序 - 第一个，第二个，第三个，第四个元素。对于台式机，我将在第一行第一，第二，第三元素。在第二行 - 第四元素。但我需要在第一行第一、第二、第四个元素、第二行 - 第三个元素中拥有桌面。
这可以通过 javascript 或 jquery 实现。
只是前端开发的新手）所以添加jquery标签，也许有人可以帮助

【解决方案2】：

我找到了我的问题的答案。例如，第四个元素的 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();
  });
});
}

【讨论】：