Flex/Bootstrap 3 w/ Sticky

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">

    <div class="col-sm-2">
      <div>
        1
      </div>
    </div>
    <div class="col-sm-2">
      <div>
        2
      </div>
    </div>
    <div class="col-sm-2 sticky-div">
      <div>
        3 a
      </div>
    </div>
    <div class="col-sm-2">
      <div>
        4
      </div>
    </div>
    <div class="col-sm-2">
      <div>
        5
      </div>
    </div>
    <div class="col-sm-2">
      <div>
        6
      </div>
    </div>
  </div>
</div>

<hr />

<div class="container pinnable">
  <div class="row">



    <div class="col-sm-2">
      <div>
        1
      </div>
    </div>
    <div class="col-sm-3">
      <div>
        2
      </div>
    </div>
    <div class="col-sm-4 sticky-div">
      <div>
        3 (stickied)
      </div>
    </div>
    <div class="col-sm-2">
      <div>
        4
      </div>
    </div>
    <div class="col-sm-1">
      <div>
        5
      </div>
    </div>
  </div>
</div>

<hr />

<div class="container pinnable">
  <div class="row">



    <div class="col-sm-6">
      <div>
        1
      </div>
    </div>
    <div class="col-sm-6 sticky-div">
      <div>
        2 (stickied)
      </div>
    </div>
  </div>
</div>

CSS

@media screen and (max-width: 768px) {
  .row {
    display: flex;
    flex-flow: column;
  }
  [class*="col-"] {
    order: 2;
  }
  .sticky-div {
    order: 1;
  }
}


/********
* EXTRA
*********/

.container {
  background: gray;
}

.row > div > div {
  text-align: center;
  font-size: 20px;
  color: white;
  font-weight: bold;
  margin: 3px;
}

.row div:nth-of-type(1) > div {
  background: red;
}

.row div:nth-of-type(2) > div {
  background: orange;
}

.row div:nth-of-type(3) > div {
  background: purple;
}

.row div:nth-of-type(4) > div {
  background: limegreen;
}

.row div:nth-of-type(5) > div {
  background: blue;
}

.row div:nth-of-type(6) > div {
  background: brown;
}