html - 如何在移动版中更改div对齐方式

Question

我的 html 中有 3 个 div。 div1, div2, div3。现在在移动版本中，我想更改那些 div 的对齐方式。我在下面的图片中给出了。

HTML 代码

<div class="row">
 <div class="col-md-12">
  Div1
 </div>
 <div class="col-md-9" style="float:right;">
  Div3
 </div>
 <div class="col-md-3" style="float:left;">
  Div2
 /div>
</div>

但是没有解决。

怎么做？

有人帮忙吗？

Answer 1

看起来您正在使用 Bootstrap 。如果您使用的是 Bootstrap 4，则可以使用 ordering feature轻松实现这一目标。

<div class="row">
  <div class="col-md-12 order-md-1 order-sm-1">
    Div1
  </div>
   <div class="col-md-3 order-md-2 order-sm-3">
      Div2
   </div>
   <div class="col-md-9 order-md-3 order-sm-2">
      Div3
  </div>
</div>

Fiddle

编辑

由于您使用的是 bootstrap 3，因此无法对 col-12 重新排序(例如 col- * -push/col- * -pull)。作为替代，您可以使用 flex-box或 grid轻松实现这一目标。请参见下面的示例。

<div class="row reordered">
  <div class="col-md-12">
    Div1
  </div>
  <div class="col-md-3">
    Div2
  </div>
  <div class="col-md-9">
    Div3
  </div>
</div>

CSS - 使用 grid 重新排序

@media screen and (max-width: 992px) { //992 is the breakpoint of col-md
  .reordered {
   display: grid;
 }

 .col-md-3 {
   order: 2;
 }

.col-md-9 {
   order: 1;
 }
}

Fiddle