当 html 不相邻时，同一行的 Bootstrap 列

Question

我有这个 html 代码使用 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-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>

第三个 css div:

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

当 html 不相邻时，同一行的 Bootstrap 列

Bootstrap columns on same row when html is not adjacent

html

css

twitter-bootstrap

twitter-bootstrap-3