Pinned Bootstrap Grid with Flex

by Austin Anderson

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<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>
<p class="overview">
  <ul>


    <li>The .sticky-div class should be on TOP whenever bootstrap goes into a collapsed/default state (lets say XS).
    </li>
    <li>There will only ever be one sticky-div at a time (if one is set).</li>
    <li>Needs to be dynamic as the user can pick any valid Bootstrap column structure such as:
      <ul>

        <li>6-6</li>
        <li>2-2-2-2-2-2</li>
        <li>3-4-2-2-1</li>
        <li>ect...</li>
      </ul>
    </li>
  </ul>
</p>


<div>
  <hr />
</div>
<div class="container">
  <div class="row">
    <p>
      HARDCODED EXAMPLE (change from sm to xs)
    </p>
  </div>
  <div class='row visible-sm'>
    <div class="col-sm-3">
      <div class="red">1</div>
    </div>
    <div class="col-sm-3">
      <div class="blue">2</div>
    </div>
    <div class="col-sm-3 sticky-div">
      <div class="green">3 (sticky)</div>
    </div>
    <div class="col-sm-3">
      <div class="orange">4</div>
    </div>
  </div>
  <div class='row visible-xs'>
    <div class="col-sm-3 sticky-div">
      <div class="green">3 (sticky)</div>
    </div>
    <div class="col-sm-3">
      <div class="red">1</div>
    </div>
    <div class="col-sm-3">
      <div class="blue">2</div>
    </div>
    <div class="col-sm-3">
      <div class="orange">4</div>
    </div>
  </div>
</div>

<div>
  <hr />
</div>
<div class="container">
  <div class="row">
    <p>
      HARDCODED EXAMPLE (change from sm to xs)
    </p>
  </div>
  <div class='row visible-sm'>
    <div class="col-sm-2">
      <div class="red">1</div>
    </div>
    <div class="col-sm-2">
      <div class="blue">2</div>
   ...

CSS

//STICKY/PINNED DIV ON COLLAPSED VIEW
.sticky-div {
  //Put me at top of collapsed views (xs)
}

////////////////////////////////////////
/////////////////DEFAULTS///////////////
////////////////////////////////////////
body {
  background: lightgray;
}

p {
  text-align: center;
  color: lightyellow;
  padding: 5px;
  border-bottom: solid 1px black;
}

.overview,
ul {
  padding: 10px;
  font-size: 14px;
  color: black;
  font-weight: bold;
}

.row {
  background: gray;
}

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

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: limegreen;
}

.orange {
  background: orange;
}

.purple {
  background: purple;
}

.brown {
  background: brown;
}