Twitter bootstrap 3 Bootstrap3-确保数据在响应网格中正确分组

我试图在Bootstrap 3中实现以下布局，将旧的基于表的布局转换为Bootstrap的响应网格：

label1a: value1a    label2: value2
label1b: value1b    label3: value3
label1c: value1c    label4: value4

1a到c是需要分组在一起的相关数据，在这种情况下是地址数据，例如

Address1: [data1]    Contact:  Joe Bloggs
Town:     [data2]    Position: Developer

等等

我遇到的问题是，在较小的视口中，我希望地址数据保持在单个部分中显示，而不是与其他数据交错显示，即

Address1:
[data1]
Town: 
[data2]
Contact:
Joe Bloggs
Position:
Developer

但结果是

Address1:
[data1]
Contact:
Joe Bloggs
Town: 
[data2]
Position:
Developer

考虑到代码，这并不奇怪：

                    <div class="row">                         
                             <label for="Address" class="control-label col-sm-2">Address:</label>     
                            <div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Address1")%> <%# DataBinder.Eval(Container.DataItem, "Address2") %></div>                         
                             <label for="Contact" class="control-label col-sm-2">Contact:</label>     
                            <div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Name")%></div>                                                 
                     </div>    

                     <div class="row">
                             <label for="Town" class="control-label col-sm-2">Town:</label>     
                            <div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Address3")%></div>
                             <label for="Position" class="control-label col-sm-2">Position:</label>     
                            <div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Position")%></div>                        
                      </div>

---

这一定是一个相当常见的场景，所以希望是一些简单的事情。很明显，我可以改变布局，但最好知道如何在引导中实现这一点。谢谢。

您可以使用包含两列的行来完成此操作。一列显示地址信息，另一列显示其余信息

然后，通过使用bootstrap的内置表单布局，您可以在移动设备上自动将文本放置在标签下方

下面是一个引导示例：

---

对我有用。谢谢

<div class="row">
  <div class="col-sm-6 form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2">Address 1</label>
      <div class="col-sm-10">
        <p class="form-control-static">123 Main St</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Town</label>
      <div class="col-sm-10">
        <p class="form-control-static">London</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2">Contact</label>
      <div class="col-sm-10">
        <p class="form-control-static">Joe Bloggs</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Position</label>
      <div class="col-sm-10">
        <p class="form-control-static">Developer</p>
      </div>
    </div>
  </div>
</div>