Question

我尝试在桌面视图和移动视图中更改列顺序。在移动设备视图中，Last Name应该位于桌面的第二位，它应该位于最后一位。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="container active col-md-3 col-sm-6 ">
    <div class="panel panel-default">
      <div class="panel-heading">First Name</div>
    </div>
  </div>

  <div class="container active col-md-3 col-sm-6 col-md-push-6">
    <div class="panel panel-default">
      <div class="panel-heading">Last Name</div>
    </div>
  </div>

  <div class="container active col-md-3 col-sm-6 col-md-pull-3">
    <div class="panel panel-default">
      <div class="panel-heading">Address</div>
    </div>
  </div>

  <div class="container active col-md-3 col-sm-6 col-md-pull-3 ">
    <div class="panel panel-default">
      <div class="panel-heading">Company</div>
    </div>
  </div>

</div>

Answer 1

使用 Flex 并添加媒体查询可以轻松解决您的问题。

有一种方法可以使用Bootstrap Grid完成它，即使用col-md-push-4等。

但使用flex并将order添加到内部元素非常方便。

非常有用 Flexbox documentation 。

＆＃13;

.outer {
  margin: 20px 20px;
  display: flex;
  flex-wrap: wrap;
}


/*For Mobile*/

@media (min-width: 400px) {
  .inner {
    width: 100%;
    padding: 0px 20px;
  }
  .fn {
    order: 1;
  }
  .ln {
    order: 2;
  }
  .add {
    order: 3;
  }
  .co {
    order: 4;
  }
}


/*For Desktop which we are working for*/

@media (min-width: 992px) {
  .inner {
    width: 50%;
    padding: 0px 20px;
  }
  .fn {
    order: 1;
  }
  .ln {
    order: 3;
  }
  .add {
    order: 2;
  }
  .co {
    order: 4;
  }
}


/*For Large Screen*/

@media (min-width: 1200px) {
  .inner {
    width: 25%;
    padding: 0px 20px;
  }
  .fn {
    order: 1;
  }
  .ln {
    order: 4;
  }
  .add {
    order: 2;
  }
  .co {
    order: 3;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="outer">
  <div class="inner fn">
    <div class="panel panel-default">
      <div class="panel-heading" style="background:red; color:white;">First Name</div>
    </div>
  </div>


  <div class="inner ln">
    <div class="panel panel-default">
      <div class="panel-heading" style="background:green; color:white;">Last Name</div>
    </div>
  </div>
  <div class="inner add">
    <div class="panel panel-default">
      <div class="panel-heading" style="background:blue; color:white;">Address</div>
    </div>
  </div>

  <div class="inner co">
    <div class="panel panel-default">
      <div class="panel-heading" style="background:orange; color:white;">Company</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我看到你正在使用push＆amp;拉，这只适用于桌面/平板电脑视口。

最好根据您的需要为移动设备开发，然后使用push＆amp;拉桌面/平板电脑进行重新安排。

我使用相同的方法实现了类似的排序。它运作得很好。

<强>更新

添加相同的plunker：http://plnkr.co/edit/b2PNXyyXOsXUx51LweJI?p=preview

<强> HTML

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-3 col-sm-push-3 cell cell-1">
            1
        </div>
        <div class="col-xs-12 col-sm-3 col-sm-pull-3 cell cell-2">
            2
        </div>
        <div class="col-xs-12 col-sm-3 cell cell-3">
            3
        </div>
        <div class="col-xs-12 col-sm-3 cell cell-4">
            4
        </div>
      </div>
    </div>
  </body>

</html>

<强> CSS

.cell {
  background: #eee;
  margin: 1px;
  padding: 20px 0;
  text-align: center;
}

如何在移动视图中更改bootstrap 3版本列顺序

2 个答案: