Bootstrap 响应式设计 - 移动面板

Question

有没有办法在另一个面板之前“移动”一个面板？

例如我有 3 个面板：

<div id="left" class="col-xs-6 col-sm-3 col-md-3 col-lg-3">

        <a href="mail-compose.html" class="btn btn-danger btn-block btn-compose-email">Left</a>
        <div class="panel panel-default">
            <div class="panel-body">Panel content


            </div>
        </div>

    </div>
 <div id="mid" class="col-xs-12 col-sm-3 col-md-3 col-lg-3">

        <a href="mail-compose.html" class="btn btn-danger btn-block btn-compose-email">Mid</a>
        <div class="panel panel-default">
            <div class="panel-body">Panel content


            </div>
        </div>

    </div>
 <div id="right" class="col-xs-6 col-sm-3 col-md-3 col-lg-3">

        <a href="mail-compose.html" class="btn btn-danger btn-block btn-compose-email">Right</a>
        <div class="panel panel-default">
            <div class="panel-body">Panel content


            </div>
        </div>

    </div>

我想做的是当手机到达时

@media (max-width: 768px) {  }

我想让我的 2 个 col-xs-6 面板 [left 和 right] 彼此相邻，然后 mid 将在它们下方，因为它是 col-xs-12

我尝试添加一个

#left {float:left;}
#right {float:left;}

在电话媒体中，这样我就可以尝试迫使它们彼此相邻浮动，但它不起作用。

这可能吗？

Answer 1

1.xs设备可以使用display flex属性。
codepen

@media(max-width:768px){
  #right
  {
  float:none;
  display:flex;
  flex-direction:column;
  }
}

2。或者您可以在右 div 之后创建另一个中间 div 并仅在 xs 设备上显示它，同时仅在 xs 设备上隐藏第一个中间 div。了解有关 hidden-* 和 visible-* 引导类的更多信息here。
codepen