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 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

编辑

由于您使用的是引导程序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

Answer 2

如果我理解正确，则说明您使用的是Bootstrap框架，在这种情况下，可以使用框架网格系统中的“ responsive utility classes”来实现所需的功能。要控制移动版本上元素的顺序，您还需要添加一些其他CSS。

对HTML进行以下更改以及添加.order-row等CSS可以为您实现：

@media (max-width: 768px) {
  .order-row {
    display: flex;
    flex-direction: column;
  }
  .order-0 {
    order: 0;
  }
  .order-1 {
    order: 1;
  }
}

<link href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12">
      Div1
    </div>
  </div>
  <div class="row order-row">
    <div class="col-md-3 col-sm-12 order-1">
      Div2
    </div>
    <div class="col-md-9 col-sm-12 order-0">
      Div3
    </div>
  </div>
</div>

有关如何使用引导响应网格类的更多信息，see this documentation

Answer 3

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

Answer 4

如果您使用引导程序4，则可以使用order

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

说明
Div2将显示在视口md上并更大的左侧，如果视口小于Div3

，它将显示在md下

如何在移动版本中更改div对齐

4 个答案: