<div class="container">
   <div class="pannel">pannel-1</div>
   <div class="pannel">pannel-2</div>
   <div class="pannel">pannel-3</div>
   <div class="pannel">pannel-4</div>
   <div class="pannel">pannel-5</div>
   <div class="pannel">pannel-6</div>
   <div class="pannel">pannel-7</div>
   <div class="pannel">pannel-8</div>
   <div class="pannel">pannel-9</div>
   <div class="pannel">pannel-10</div>
 </div>

 <hr>

 <div class="container">
   <div class="pannel">pannel-1</div>
   <div class="pannel">pannel-2</div>
   <div class="pannel">pannel-3</div>
   <div class="pannel">pannel-4</div>
   <div class="pannel">pannel-5</div>
   <div class="pannel">pannel-6</div>
   <div class="pannel">pannel-7</div>
   <div class="pannel">pannel-8</div>
   <div class="pannel">pannel-9</div>
 </div>
 <hr>

 <div class="container">
   <div class="pannel">pannel-1</div>
   <div class="pannel">pannel-2</div>
   <div class="pannel">pannel-3</div>
   <div class="pannel">pannel-4</div>
   <div class="pannel">pannel-5</div>
   <div class="pannel">pannel-6</div>
   <div class="pannel">pannel-7</div>
   <div class="pannel">pannel-8</div>
 </div>

 <hr>

 <div class="container">
   <div class="pannel">pannel-1</div>
   <div class="pannel">pannel-2</div>
   <div class="pannel">pannel-3</div>
   <div class="pannel">pannel-4</div>
   <div class="pannel">pannel-5</div>
   <div class="pannel">pannel-6</div>
   <div class="pannel">pannel-7</div>
   <div class="pannel">pannel-8</div>
   <div class="pannel">pannel-9</div>
   <div class="pannel">pannel-10</div>
   <div class="pannel">pannel-11</div>
 </div>
/* we don't know how many elements we may have but know it won't be more than 100 */
$divs: 100;
@for $i from 1 through $divs {
  .pannel:nth-child(#{$i}) {
    order: -#{$i};
  }
}
.container {
  max-width: 960px;
  min-width: 320px;
  background: #dcd1d1;
  padding: 0.5em;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-flow: row-reverse wrap-reverse;
}
.pannel {
  background: #eee;
  margin: 0.5em;
  padding: 0.5em;
  flex: 1 0 calc(25% - 2.125em);
  text-align: center;
  width: 200px;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.