引导布局逻辑正确，但呈现怪异

Question

我正在设计一个引导网格，并希望它改变不同的视图大小。

我使用的代码包括在这里：

<div class="container">
    <div class="row">
        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
            <h3>فرم اطلاعات کاربر</h3>
            <hr>
            <fieldset>
                <legend>گروه اول</legend>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-3 col-md-push-9">
                            <label for="name">نام</label>
                            <input type="text" name="name" placeholder="نام" class="form-control">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-3 col-md-pull-0 col-md-push-3">
                            <label for="family">نام خانوادگی</label>
                            <input type="text" name="family" placeholder="نام خانوادگی" class="form-control">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-3 col-md-pull-3 col-md-push-0">
                            <label for="name">نام پدر</label>
                            <input type="text" name="father-name" placeholder="نام پدر" class="form-control">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-3 col-md-pull-9">
                            <label for="family">شماره شناسنامه</label>
                            <input type="text" name="id-number" placeholder="شماره شناسنامه" class="form-control">
                        </div>
                    </div>
                </div>
            </fieldset>

        </div>
    </div>
</div>

我还在这里创建了一个Bootply：代码样本

正如您在上面的链接中所看到的，视图处于MD模式时的第三列，拉出3列，因为它是在SM模式下被推送的，所以我重新设置了push on MD模式，但是尽管css的权利是在列上设置的，但是它没有移动到正确的位置。

有人知道怎么解决这个问题吗？

更新:我还必须提到，我希望我的布局从右到左，这就是我使用这段代码的原因。

Answer 1

还有一件事你不需要重复这些类

<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">

通过声明col-xs-12，您是在引导移动屏幕和更大屏幕时使用12 col。

<div class="col-xs-12">