0
各行の高さを固定しないと、次の各行要素の正しい配置をどのように設定できますか。 基本的なブートストラップの例を示します。ここで固定高さアライメントの問題がないブートストラップグリッド
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Small Grid</h1>
<p>The following example will result in a 33.3%/66.6% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 col-xs-6" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-8 col-xs-6" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
<div class="col-sm-4 col-xs-6" style="background-color:blue;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-8 col-xs-6" style="background-color:red;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</body>
</html>
は、同じhttps://jsfiddle.net/ujw59haf/1/ 出力のためのフィドルリンケある 
が、私は第三の要素（青色のdiv）は、左から始める必要があることをしたいです。 ここでは、プル・左を使用できますが、実際のシナリオでは、6つの要素が1つの行にあります。この要素は、Webサービスを通じて取り込まれ、各要素は動的な高さを持つことができます。
また、divの下に行の要素を配置してマージンを下げることはできません。これは行の要素数を修正し、画面サイズが変更されると次の行の要素が新しい行から始まります次の行の要素は前の行には収容されません。
私の質問を明確に理解するために、私は自分の質問を編集しています。フィールド2の高さがよりあるよう
これは、この更新されたコードここhttps://jsfiddle.net/0zevgop4/3/
のためのフィドルでは、大画面のために、フィールド4には常に、フィールド2の後に来ます。 
私は行クラスを使用したくありません。これは、編集可能なフィールド構造を邪魔しています。
完全なコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.wordWrap{
word-wrap: break-word;
}
</style>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.editFields= false;
$scope.ChangeStructure = function(){
if($scope.editFields)
$scope.editFields=false;
else
$scope.editFields=true;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container-fluid">
<h1>Small Grid</h1>
<div class="row form-group bgColor" ng-hide="ActiveCustomer && (customerDetails.CustomerStatus != 'DUMMY' && customerDetails.CustomerStatus != 'DUMMY PENDING SETUP')">
<div class="container">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="form-group">
<label for="name" class="control-label">Field 1</label>
<div class="wordWrap">
<p>ABC Testing</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
<div class="form-group">
<label for="name" class="control-label">Field 6</label>
<div>
<p>Field</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="!editFields">
<div class="form-group" >
<label for="name" class="control-label">Field 2</label>
<div class="wordWrap">
<p>ABCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="form-group">
<label for="name" class="control-label">Field 3 </label>
<div ng-show="!editFields">
<p>XYZZZZZ</p>
</div>
<div class="dataMinHeight" ng-show="editFields">
<input type="text" ng-model="customerDetails.PhoneNumber" data-ng-mask="###-###-####" data-on="keyup" class="form-control" maxlength="12">
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="form-group">
<label for="name" class="control-label">Field 4 </label>
<div class="wordWrap" ng-show="!editFields">
<p>PQRRRRRRRRRRRRRRRRRRRRRRRRR</p>
</div>
<div class="dataMinHeight" ng-show="editFields">
<input type="text" ng-model="customerDetails.MailAddress" class="form-control">
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="!editFields">
<div class="form-group">
<label for="name" class="control-label">Field 5</label>
<div>
<p>MNOPPPPPP</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="IsAdmin">
<div class="form-group">
<label for="name" class="control-label">Field 6</label>
<div ng-hide="editFields">
<p>IIIIIIIIIIIIIIII</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="IsAdmin">
<div class="form-group">
<label for="name" class="control-label">Field 7 <span ng-show="editFields" style="color:orangered;">*</span></label>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
<div class="form-group">
<label for="name" class="control-label">
Field 2 Part 1<!--<span class="star-mark">*</span>-->
</label>
<div class="dataMinHeight">
<p>XYYYYY</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
<div class="form-group">
<label for="name" class="control-label">
Field 2 Part 2
</label>
<div class="dataMinHeight">
<p>UIZZPTTTT</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
<div class="form-group">
<label for="name" class="control-label">
Field 2 Part 3
</label>
<div class="dataMinHeight">
<p>GGGGGGGGGGGG</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
<div class="form-group">
<label for="name" class="control-label">
Field 2 Part 4
</label>
<div class="dataMinHeight">
<p>ABCDIGHGHGH</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
<div class="form-group">
<label for="name" class="control-label">
Field 2 Part 5
</label>
<div class="dataMinHeight">
<p>ERTTTYYYYYYYY</p>
</div>
</div>
</div>
</div>
<hr />
</div>
<div class="row">
<button type="button" ng-click="ChangeStructure()">
Edit Fields
</button>
</div>
</div>
</body>
</html>
私は、私の更新の質問を参照してくださいクラス= "行" を使用する必要はありません。 –