html - 如何使用 bootstrap3 在移动 View 中以正确的顺序显示 div 表数据？

Question

我正在使用 Bootstrap3，并且我正在使用以下在我的桌面上正确显示的代码；但是，当我在移动设备上查看时，它显示在错误的文本分组中。

我希望它在移动 View 中显示如下:

• 标题 1
• header 1 的详细描述文本
• 标题 2
• header 2 的详细描述文本

但是，当我在移动 View 中查看时，它显示如下:

• 标题 1
• 标题 2
• header 1 的详细描述文本
• header 2 的详细描述文本

这是我设置的div代码:

<div class="row">
    <div class="col-sm-6 clearfix text-left">
        <p>Header 1</p>
    </div>
    <div class="col-sm-6 clearfix text-left">
        <p>Header 2</p>
    </div>              
</div>      
<div class="row">
    <div class="col-sm-6 text-left">
        Detailed description text for Header 1
    </div>
    <div class="col-sm-6 text-left">
        Detailed description text for Header 2
    </div>
</div>

谢谢!

Answer 1

不确定您希望它看起来像什么，但只要将所有内容都放在列中就可以了。像这样

<div class="row">
    <div class="col-sm-6 text-left">
      <p>Header 1</p>
      <p>Detailed description text for Header 1</p>
    </div>
    <div class="col-sm-6 text-left">
      <p>Header 2</p>
      <p> Detailed description text for Header 2</p>
    </div>              
</div>

在这里玩一下 http://codepen.io/anon/pen/eZOpKx