css - 更改移动布局上的 Bootstrap 列/行顺序？

Question

使用 Bootstrap 是否可以根据视口(viewport)拥有这些不同的布局？我一直在搜索这个，我知道推、拉的概念，我也在使用相同的东西，但我有一些不同的要求，我无法想出如何去做。

下面是我的 Bootstrap 代码以及预期和实际输出。我无法获得预期的输出。有人可以帮我弄这个吗。 Explanation预期的在移动设备上(堆叠)CA丁乙E

在桌面上(应该堆叠 CDE)A B C 丁 E

实际在移动设备上(堆叠)A乙C丁乙在桌面上 (CDE)A B C 丁 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>