CodePen

HTML

            
              <div id="wrapper">
<div id="window">
  <ul class="reverse">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul><ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul>
</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #wrapper {
  overflow: auto;
}
#window {
  width: 1920px;
  display: flex;
}
ul {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-flow: column wrap;
  height: 360px;
  width: 960px;
}
ul.reverse {
  flex-flow: column-reverse wrap-reverse;
}
li {
  background-color: grey;
  color: white;
  font-size: 50px;
  line-height: 80px;
  text-align: center;
  margin: 10px;
  padding: 10px;
  height: 80px;
  width: 200px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................