Question

使用Bootstrap可以根据视口设置这些不同的布局吗？我一直在搜索这个，我知道概念推，拉我也使用相同但我有一些不同的要求，我无法想出如何。

我有下面的引导代码以及预期和实际输出。我无法获得预期的输出。有人可以帮我弄这个吗。 Explanation 预期在移动（堆叠） C 一个 d 乙 E

在桌面上（CDE应该堆叠） A B C. d ë

实际在移动（堆叠）一个乙 C d Ë 在桌面上（CDE） A B C. d ë

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-2">
      <div class="well" id="first" style="background-color:red;">
        A - Image
      </div>
    </div>
    <div class="col-sm-4">
      <div class="well" id="second" style="background-color:pink">
        B - Thumb
      </div>
    </div>

    <div class="col-sm-6">
      <div class="heading">
        <h2 runat="server" class="product_title" id="productoverviewTitle"></h2>
        <p class="sub-heading">
          <div class="well" id="third" style="background-color:green">
            C
          </div>
        </p>
      </div>

      <div class="content">
        <div class="panel entry-content">
          <div class="well" id="fourth" style="background-color:orange">
            D
          </div>
        </div>
      </div>

      <div class="where-to-buy">
        <div class="well" style="background-color:lightblue">
          E
        </div>
      </div>

    </div>
  </div>
</div>

＆＃13;

此线程附有图片。

Answer 1

能够在媒体查询

中使用 flexbox 完成

重新排列嵌套列很难。我们不要说它很难，不推荐。

＆＃13;

@media only screen and (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  #a {
    order: 4;
  }
  #b {
    order: 2;
  }
  #c {
    order: 1;
  }
  #d {
    order: 3;
  }
  #e {
    order: 5;
  }
}

@media only screen and (min-width: 768px) {
  #d {
    bottom: 220px;
  }
  #e {
    bottom: 220px;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-sm-2" id="a">
      <div class="well" style="background-color:red; min-height:300px;">
        A - Image
      </div>
    </div>

    <div class="col-sm-4" id="b">
      <div class="well" style="background-color:pink">
        B - Thumb
      </div>
    </div>

    <div class="col-sm-6" id="c">
      <div class="heading">
        <h2 runat="server" class="product_title" id="productoverviewTitle"></h2>
        <p class="sub-heading">
          <div class="well" style="background-color:green">
            C
          </div>
        </p>
      </div>
    </div>

    <div class="col-sm-6 col-sm-offset-6" id="d">
      <div class="content">
        <div class="panel entry-content">
          <div class="well" style="background-color:orange">
            D
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-sm-offset-6" id="e">
      <div class="where-to-buy">
        <div class="well" style="background-color:lightblue">
          E
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

在移动布局上更改Bootstrap列/行顺序？

1 个答案: