如何在移动版本中更改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>

注意：我正在使用引导程序3

该怎么做？

请问有人帮忙吗？

Answer 1

我以前回答过类似的问题。使用bootstrap-3（推/拉）无法对col-12重新排序。您可以将网格与媒体查询一起使用。

<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

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

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

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

Answer 2

尝试：

 @media only screen and (max-width: 400px) {
 .row {
   display: grid !important;
   grid-template-columns: auto !important;
   }
 }

Answer 3

希望使用col-sm-12可以正常工作

Answer 4

您需要使用Grid: column ordering

根据移动优先概念，您需要以正确的顺序为移动优先定义默认视图。

• 第1节
• 第3节
• 第2节

然后为{strong>第3部分分配col-md-push-3，为第2部分分配col-md-pull-9，并使用col-md-类定义宽度。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div>section 1</div>
    </div>
    <div class="col-xs-12 col-md-9 col-md-push-3">
      <div>section 3</div>
    </div>
    <div class="col-xs-12 col-md-3 col-md-pull-9">
      <div>section 2</div>
    </div>
  </div>
</div>