如何避免Bootstrap Div重叠

Question

这里我有一个带有一些列的div当它的MD模式很好但是当我在xs中改变它的模式时，lg ...它的重叠彼此

<div class="container">
    <div class="row">
        <div class="form-group">
            <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-xl-1">
                <p>EmpId</p>
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-xl-1">
                <p>Name</p>
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-xl-1">
                <p>Gneder</p>
            </div>
            <div class="col-md-2 col-sm-2 col-xs-2 col-lg-2 col-xl-2">
                <p>Email</p>
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-xl-1">
                <p>Password</p>
            </div>            
        </div>
    </div>
    <div class="row" ng-repeat="ee in Employee">
        <div class="form-group">
            <div class="col-md-1 col-sm-1 col-xs-1 col-xs-1 col-lg-1 col-xl-1">
                {{ee.Emp_Id}}
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-xl-1">
                {{ee.EmpName}}
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-xl-1">
                {{ee.Gen}}
            </div>
            <div class="col-md-2 col-sm-1 col-xs-1 col-lg-1 col-xl-1">
                {{ee.Email}}
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-xl-1">
                {{ee.Psw}}
            </div>

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

如果我的Div中有超过12列

，我还可以