Bootstrap响应式设计 - 移动面板

时间:2016-11-09 16:15:57

标签: twitter-bootstrap panel responsive

无论如何要将一个小组“移动”到另一个小组之前吗?

例如,我有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面板[左和右]彼此相邻,然后mid将在它们之下,因为它是col-xs-12

我尝试添加

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

在手机媒体内部,以便我可以尝试强制它们彼此相邻,但它不起作用。

这甚至可能吗?

enter image description here

1 个答案:

答案 0 :(得分:1)

1.您可以在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