在更改屏幕方向時重新排序自舉行

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裹父值和子值：

.myHeader { 
 
    background-color: lightgreen; 
 
}

<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>