How to create a side scroller with two rows of elements instead of one row?

Question

I am trying to create a side scroller with 2 boxes per visible at a time using flex (One on top and one underneath)

As you can see on the first bunch of boxes below, I have it successfully horizontally scrolling, but I want there to be two rows of boxes in view instead of one row.

.box-flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.box-flex-row > .m4 {
  min-width: 45%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">

  <div class="section">
    <div class="row box-flex-row">
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <hr>
  <div class="section">
    <div class="row">
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

  <hr class="hr-bottom-line">
  <div class="section">
    <div class="row">
      <h2>Stuff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor, nibh sit amet ultrices gravida, tortor magna pretium nunc, at ultricies ipsum libero ac mi. Sed a dictum turpis. Integer vitae ante sed neque ultrices congue. Sed euismod
        nunc id magna aliquet dictum id id erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta mauris ut sapien molestie lacinia. Sed ullamcorper purus a lorem porta, et imperdiet mauris imperdiet.
        Nullam sit amet neque nibh. Pellentesque non magna sed diam tincidunt accumsan quis quis magna. Vivamus urna turpis, ornare id malesuada vel, fringilla eget elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Suspendisse posuere mi eget augue scelerisque euismod. Phasellus quis aliquam dolor, et dapibus urna. Proin suscipit et ligula at semper. Ut tristique magna vitae finibus pellentesque. Phasellus tincidunt tortor et sem posuere, et feugiat
        tellus lacinia. Praesent commodo ullamcorper eros quis suscipit. Nam sed justo tortor. Nulla facilisi. Pellentesque ut lacus sit amet lacus mattis aliquet. Morbi eu purus elit. Aenean rhoncus, lectus vitae aliquet fringilla, eros metus fermentum
        metus, vel malesuada arcu turpis non dolor. Curabitur non ex sed est vehicula efficitur. Fusce vel enim in lectus viverra luctus. Fusce ac sapien porttitor, consectetur massa ut, suscipit nulla. Fusce nec massa lobortis, tincidunt ex eget, ultrices
        felis. Vivamus turpis justo, varius vel tincidunt sed, consequat a purus. Aliquam ultrices eros fermentum nunc dignissim, quis maximus eros malesuada. Vivamus non porttitor quam, id efficitur libero. Donec vulputate posuere viverra. Fusce iaculis
        tellus sit amet orci consequat, at sagittis magna rhoncus. Maecenas ac dapibus est, vel auctor lectus. Integer porta lacus dui, eu scelerisque enim iaculis id. Aliquam eget pulvinar nisl. In hac habitasse platea dictumst. Curabitur et rutrum sem.
        Cras viverra pharetra est. Etiam at molestie ipsum. Donec varius pulvinar tortor, in semper lacus. Nunc vel luctus dui. In eu neque et erat eleifend sodales. Pellentesque id ligula sed risus tempor maximus. Quisque turpis felis, condimentum et
        bibendum ac, congue eu arcu. Aenean rutrum ante et dui pharetra, sed mattis risus accumsan. Mauris vulputate venenatis urna, at venenatis purus. In vitae pellentesque arcu. Maecenas fringilla arcu sed dolor sollicitudin, ut aliquet nisi auctor.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dictum lacus et ornare mollis. Suspendisse potenti. Donec eu leo porttitor, ullamcorper arcu at, sagittis augue. Praesent ante urna, pellentesque
        sed interdum in, malesuada sit amet turpis. Mauris imperdiet et ipsum at hendrerit. Nunc facilisis quam eu rutrum cursus. Quisque convallis ante eu ultrices varius. Cras et sapien odio. Morbi quis dui vitae tellus mattis eleifend. Vestibulum posuere
        sapien elit, nec pretium metus pulvinar nec. Aliquam bibendum magna sit amet urna blandit lobortis.</p>
    </div>
  </div>
  <br><br>
</div>

I have also created a CodePen example. Here's a image of how it looks and how I'd like it to look:

Update: Out of the answers below, I was able to create the exact solution I needed: CodePen example

Answer 1

Since you want two independent rows on mobile screens, and the cards to merge together (as in one container) on larger screens, flexbox may not be the best solution.

CSS Grid may not be the best solution either – you may need JavaScript – but here's a grid concept that you may find useful:

codepen demo

.box-flex-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 45%));
  grid-auto-rows: 100px;
  grid-gap: 10px;
  overflow: auto;
  padding: 10px;
  background-color: lightgray;
}

@media (max-width: 601px) {
  .m4:nth-child(-n + 6) {
    grid-row: 1;
  }
  .m4:nth-child(n + 6) {
    grid-row: 2;
  }
  .box-flex-row {
    grid-template-columns: none;
    grid-auto-columns: 45%;
  }
}

.m4 {
  border: 1px solid gray;
  background-color: lightgreen;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m4:nth-child(-n + 6) {
  background-color: lightgreen;
}

.m4:nth-child(n + 6) {
  background-color: orange;
}

body {
  margin: 0;
}

<div class="container">
  <div class="section">
    <div class="row box-flex-row">
      <div class="col s12 m4">test 1 upper</div>
      <div class="col s12 m4">test 2 upper</div>
      <div class="col s12 m4">test 3 upper</div>
      <div class="col s12 m4">test 4 upper</div>
      <div class="col s12 m4">test 5 upper</div>
      <div class="col s12 m4">test 1 lower</div>
      <div class="col s12 m4">test 2 lower</div>
      <div class="col s12 m4">test 3 lower</div>
      <div class="col s12 m4">test 4 lower</div>
      <div class="col s12 m4">test 5 lower</div>
      <div class="col s12 m4">test 6 lower</div>
    </div>
  </div>
</div>