Bootstrap 响应式设计 - 移动面板

Question

是否有 "move" 面板之前的面板？

例如我有 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>

我想做的是当 phone 达到

时

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

我想让我的 2 个 col-xs-6 面板 [左和右] 彼此相邻，然后中间将在它们下面，因为它是 col-xs-12

我尝试添加

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

在 phone 媒体中，这样我就可以尝试强迫它们彼此相邻浮动，但它没有用。

这可能吗？

Answer 1

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

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

2。或者您可以在右 div 之后创建另一个 mid div 并仅在 xs 设备上显示它，同时保持第一个 mid div 仅在 xs 设备上隐藏。进一步了解 hidden-* 和 visible-* bootstrap 类 here.
codepen

Bootstrap 响应式设计 - 移动面板

Bootstrap Responsive Design - move panel

panel

twitter-bootstrap

responsive