jquery - Bootstrap 表单布局(移动端和桌面端的元素顺序不同)

Question

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

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

这是我在移动和桌面 View 中需要的。

请指教。

Answer 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>

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