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面板[左和右]彼此相邻，然后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之后创建另一个mid div并仅在xs设备上显示它，同时保持第一个mid div仅隐藏在xs设备上。了解有关hidden- *和visible- * bootstrap类here的更多信息 codepen

Bootstrap响应式设计 - 移动面板

1 个答案: