更改屏幕方向时重新排序Bootstrapped行

Question

目前在中画面布局中我有以下

=============================

|家长|孩子|

|数据|数据|

现在，当移动设备的屏幕发生变化时，我希望它像

===============

|父|

|数据|

|孩子|

|数据|

我如何实现这样的目标？

介绍CSS

<div class="row">
  <div class="col-md-6">
    <p class="myHeader">Parent</p>
  </div>

  <div class="col-md-6">
    <p class="myHeader">Child</p>
  </div>
</div>

<div class="row">

  <div class="col-md-6">
    value
  </div>

  <div class="col-md-6">
    value
  </div>
</div>

Answer 1

在col-md-6中包含父值和子值：

＆＃13;

＆＃13;

.myHeader {
  background-color: lightgreen;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <p class="myHeader">Parent</p>
            </div>
            <div class="col-md-12">
                value
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <p class="myHeader">Child</p>
            </div>
            <div class="col-md-12">
                value
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;