Question

请想象下面显示的是横向（横向）方向的手机屏幕：

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

xxx标记即使手机旋转到垂直（纵向）方向也应保留的div。 ooo标志着我想成为动态的div。即：如果可能，它应该显示在xxx div之间（如上所示）。如果ooo div没有足够的位置（因为手机被旋转到垂直显示），div应显示在xxx div之下。像这样：

+------------------+
| 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（垂直与水平视图）

1 个答案: