更改移动布局上的引导列/行订单

Question

使用bootstrap可以根据视口是否具有这些不同的布局？我一直在搜索这个问题，我知道概念的推动，拉动我也使用的概念，但我有一些不同的要求，但我无法思考如何。

我在下面的引导程序代码以及预期和实际输出。我无法获得预期的投票。有人可以帮我弄这个吗。解释预期的在手机上（堆叠）CAdbE

在桌面上（堆叠CDE Shoud）a b c d E

实际在手机上（堆叠）AbCde在桌面上（CDE）a b c d E

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

图像与此线程相连。

Answer 1

在媒体查询中使用 flexbox 能够完成

很难重新排列嵌套的列。不要说这很难，也不建议。

@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;
  }
}

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