change Bootstrap column/row order on mobile layout?

Question

Using Bootstrap is it possible to have these different layouts depending on the viewport? I've been searching about this and I'm aware of the concepts push, pull a i am also using the same but I have some different requirement and I am not able to think out how.

I have my bootstrap code code below as well as Expected and Actual output. I am not able to get the expected out put. Can someone help me with this. Explanation Expected On Mobile (Stacked) C A D B E

On Desktop (CDE shoud be stacked) A B C D E

Actual On Mobile (Stacked) A B C D E On Desktop (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>

Image is attached with this thread.

Answer 1

Was able to accomplish using flexbox in Media Queries

It will be hard to rearrange nested columns. Let's not say it's hard, it's not recommended.

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