不同屏幕上的div对齐

Question

我如何在不同的屏幕上实现此行为。 （灰色矩形是具有一些内容的div）。假设，图片1（左）是正常的，宽屏幕;图2（中）是小（上网本或平板电脑）屏幕;图3（右）是手机屏幕。我使用bootstrap 3。

Answer 1

您可以使用offset column和column ordering类。确保以适当的屏幕/网格大小应用每个。

＆＃13;

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

div[class^="col-"] > div {
  margin: 1rem 0;
  min-height: 100px;
  background-color: yellow;
}

＆＃13;

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">
      <div>2</div>
    </div>
    <div class="col-sm-6 col-md-4 col-md-pull-4">
      <div>1</div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div>3</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意： 列DIV中的额外DIV用于说明目的。做你需要做的事。

Answer 2

您只需使用pull push classes of bootstrap。还可以了解col-*-offset-*课程。

要了解详情，请查看此网站：

Twitter bootstrap official docs

这是一个如何操作的示例

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="row">
  <div class="col-xs-12 col-md-12 col-lg-4 col-lg-push-4" style="height: 100px; background-color: red;">
    2
  </div>
  <div class="col-xs-12 col-md-6 col-lg-4  col-lg-pull-4" style="height: 100px; background-color: blue;">
    1
  </div>
  <div class="col-xs-12 col-md-6 col-lg-4" style="height: 100px; background-color: green;">
    3
  </div>
</div>

Answer 3

<div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">2</div>
    <div class="col-xs-12  col-sm-6 col-md-4 col-md-pull-4">1</div>
    <div class="col-xs-12  col-sm-6 col-md-4">3</div>
</div>