Bootstrap 3仅在小屏幕上更改div顺序

Question

做我的第一个响应式设计,在Bootstrap 3中就是这样.改变它

至

基本上从大屏幕上的3列布局更改顺序,将徽标向左移动,仅将其他两列堆叠在较小的屏幕上.如果可能的话,我想使用Bootstrap类(col-xs-6 col-md-4等)来完成它,而不必以显示/隐藏的方式复制内容.我喜欢网格布局bootstrap3提供大屏幕,所以如果可以在较小的屏幕上整理布局,我宁愿保留它.

Answer 1

演示:http://jsbin.com/uZiKAha/1

DEMO w/edit:http://jsbin.com/uZiKAha/1/edit

是的,这可以在没有JS的情况下使用BS3嵌套和推/拉以及所有浮动清除:

 <div class="container">
  <div class="row">
   <div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">
    LOGO
   </div>
   <div class="col-xs-6 col-sm-8">
    <div class="row">
     <div class="col-sm-6 col-sm-pull-6 boxb">
      B
     </div>
     <div class="col-sm-6 boxa">
      A
     </div>
    </div>
    <!--nested .row-->

   </div>
  </div>
 </div>

Answer 2

使用引导程序3：

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

之所以起作用，是因为当有足够的空间时，它们首先会浮动到其原始位置。但是，当丢失大小到中等大小和空间的空间时，它们便会堆叠，因为它们无法彼此漂浮。请注意，尽管我都使用了6列，但是即使它们不是全部都是6列也可以使用。

这是链接：http : //ageekandhisblog.com/bootstrap-3-change-stacking-order/