如何使用 bootstrap3 获取 div 表数据以正确的顺序显示在移动视图中

Question

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

我希望它在移动视图中显示如下：

• 页眉 1
• 标题 1 的详细说明文本
• 页眉 2
• 标题 2 的详细说明文本

但是，当我在移动视图中查看此内容时，它如下所示：

• 页眉 1
• 页眉 2
• 标题 1 的详细说明文本
• 标题 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