Bootstrap - 自动定位 div（垂直与水平视图）

Question

请想象下面显示的是水平（横向）方向的 phone 屏幕：

+------------------------+
| xxx    xxxxxxxx    xxx |
| xxx                xxx |
| xxx  oooooooooooo  xxx |   
|                        |
|                        |
|                        |
+------------------------+

xxx 标记 div 即使 phone 旋转到垂直（纵向）方向也应保留在原位。 ooo 标记了一个 div ，我希望它是动态的。即：如果可能应该在xxx div秒之间显示（如上图）。如果 ooo div 不够地方（因为 phone 旋转为垂直显示）， div 应该显示在 xxx [=24= 下面]s。像这样：

+------------------+
| xxx xxxxxxxx xxx |
| xxx          xxx |
| xxx          xxx |
|   oooooooooooo   |
|                  |
|                  |
|                  |
|                  | 
+------------------+

如何实现这样的观点？我是否必须创建两个 div 并使用媒体查询切换它们的可见性？

Answer 1

类似这样的方法可能有效： http://bootply.com/zIsGf5c6zP

  <div class="row">
    <div class="col-xs-3 col-sm-3 text-center">
    </div>
    <div class="col-xs-3 col-xs-push-6 col-sm-3 col-sm-push-6 text-center">
    </div>
    <div class="col-xs-6 col-xs-pull-3 col-sm-6 col-sm-pull-3 text-center">     
    </div>
     <div class="col-sm-6 col-xs-12 col-sm-pull-3 text-center">  
    </div>
  </div>

Bootstrap - 自动定位 div（垂直与水平视图）

Boostrap - automatically repositioned div (vertical vs horizontal view)

css

twitter-bootstrap-3