当html不在

Question

我有这个使用bootstrap的html代码：

<div class="row">
    <div class="col-sm-12 col-xs-6"><h1>DIV1</h1></div>
    <div class="col-xs-12"><h1>DIV2</h1></div>
    <div class="col-sm-12 col-xs-6"><h1>DIV3</h1></div>
<div>

它适用于除xs以外的所有设备。在超小型设备上，我希望DIV1和DIV3在同一行（第一行）上。

我想维护所有其他设备的布局。

Answer 1

您可能需要添加其他样式才能实现此目的，因为div通常会相继跟随。您可以将定位设置为绝对值，并将其他两个边距设置为下方的中间值。

Answer 2

我通过css和bootstrap类来管理它：

<div class="row">
  <div class="col-sm-12 col-xs-6"><h1>DIV1</h1></div>
  <div class="col-xs-12"><h1>DIV2</h1></div>
  <div class="col-sm-12 col-sm-offset-0 col-xs-6 col-xs-offset-6" id="div3"><h1>DIV3</h1></div>
</div>

第三个div的css：

@media (max-width: 767px) {
  #div3{
    position:absolute;
    top:0px;
  }
}