如何根据屏幕大小调整引导列的大小和重新排序

Question

我正在尝试重新排序我的引导列。

HTML

  <div class="row equal">
   <div class="panel  col-lg-7  col-md-7  col-sm-6 col-xs-push-12 "  id="PanelFirst">
     Some content here...
   </div>
   <div class="panel col-lg-5  col-md-5 col-sm-6  col-xs-pull-12 " id="PanelSecond">
     Some Content here....
   </div>   

我尝试过col-xs-pull和col-xs-push课程。我也试过了左拉和pull-right类。 我也尝试过将媒体查询用于较小的屏幕。

@media only screen and (max-width:480px)
{
    #PanelFirst {
        float: right;
    }

    #PanelSecond {
        float: left;
    }
}

当我使用col-xs-pull-12和col-xs-push-12类时..它也会影响更大的屏幕。我想要的是 - 我想将PanelSecond整个PanelFirst向上移动，xs向下转移到0.35.0尺寸的屏幕。

它适用于大型雕刻，但在小屏幕中，登录区域应位于顶部。但它显示的是这样。

Answer 1

只需撤销订单并应用推送＆amp;拉中等大小的列：

像这样：

<div class="row equal">
  <div class="panel col-sm-6 col-sm-push-6 col-md-push-7 col-md-5" id="PanelSecond">
    Some Content here second....
  </div>  
  <div class="panel col-sm-6 col-sm-pull-6 col-md-pull-5 col-md-7"  id="PanelFirst">
    Some content here First...
  </div>  
</div>

参考：http://getbootstrap.com/css/#grid-column-ordering

Answer 2

<强>样本：

http://plnkr.co/edit/4mtMNsjaV2HMTj2vSs6Q?p=preview

对于此类案件，始终认为移动优先。它将简化答案。

<div class="row equal">
     <div class="panel col-xs-12 col-sm-6 col-sm-push-6 col-md-5 col-md-push-7" id="PanelSecond">
       panel second content here....
     </div> 
     <div class="panel  col-xs-12 col-sm-6 col-sm-pull-6 col-md-7 col-md-pull-5"  id="PanelFirst">
       panel first content here...
     </div>
   </div>

由于您希望PanelSecond位于首位，因此我更改了html以使其保持最佳状态，然后PanelFirst。 （在我的脑海中保持移动优先css。）

然后使用拉动和推动调整列。

对齐lg，md和sm

适用于xs