Why doesn't Flexbox display this code as a 3x2 grid?

Also not in Chrome.
Perhaps have a look here
https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01

Also SassMeister gives errors on your css

Quit a few missteps here
1. Your code says CSS but it is laid out as SCSS AND the use of & is being used incorrectly. In SCSS the & is meant to denote extending the parent selector i.e. when you have
<div class="class1 class2">
Then you could style this div on the selector .class1.class2 as

.class1 {
    &.class2 {
  }
}

Select allOpen in new window

You have used it as if it is a suffix of a single class.

2. I am not sure how you have used this CSS but if you just included it in your page without first compiling it - that is also not going to work.

3. You made your cells display: flex - but not the container. You need to
a) Add display:flex to the wrapper
b) Add the flex-wrap: wrap to the wrapper
c) flex: 0 0 33.33333% to the cell
Like this

.l-cell-wrapper {
 width: 100%;
 flex-wrap: wrap;
 display: flex;
}
.c-cell {
  display: flex;
  flex: 0 0 33.33333%;
  flex-flow: row wrap;
  justify-content: space-between;
}
.c-cell__title {
    text-align: center;
    font-weight: 700;
    margin: 0 auto;
}
.c_cell__list {
    flex: 0 32%;
    margin: 0;
    padding: 0;
}
.c_cell__item {
    display: list-item;
    list-style-type: decimal;
    list-style-position: outside;
    color: $brand-black;
    margin-left: 4rem;
    padding: 0;
}

Select allOpen in new window

Julian... Thank you for your helpful comments.
It seems that I get trapped into hands-on website development every 1 to 2 years, and I'm rusty and all the tools have gone through revisions.

To your first point, yes calling it CSS was wrong. It is scss and precompiled. The workflow is basically Sublime Text 3 –> Codekit 3 –> Firefox Developer Edition.
 
I'm trying to use BEM naming and class based, vs selector based, procedures. I may be making mistakes, but this method has worked in the past. What do you think?

I will make your code revisions tomorrow (it's 2:30 AM) here. Thank you.

After following Julian's advise (with a minor change), here is my final code.
HTML

<div class="l-page-wrapper container-bleed">
  
      <h2 class="l-page-wrapper__title">How To Enable Javascript</h2> 
      <div class="l-cell-wrapper">
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Firefox</p>
                <li class="c-cell__item">In Firefox's address bar, type "about:config" and press Enter</li>
                <li class="c-cell__item">Click the "Accept the Risk and Continue"  warning message that appears</li>
                <li class="c-cell__item">Type "Javascript" in the Search Box</li>
                <li class="c-cell__item">Scroll down to "javascript.enabled"</li>
                <li class="c-cell__item">Click the right column toggle button to set value to "true"</li>
                <li class="c-cell__item">Refresh Firefox</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Edge</p>
                <li class="c-cell__item">click the "Settings and More Button" (three horizontal dots) at right of top menu bar</li>
                <li class="c-cell__item">Select "Settings" (gear wheel symbol) menu item</li>
                <li class="c-cell__item">Type "Javascript" in the Search Box</li>
                <li class="c-cell__item">Click on "JavaScript" label</li>
                <li class="c-cell__item">Select "Allowed (recommended)</li>
                <li class="c-cell__item">Refresh Edge</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Chrome</p>
                <li class="c-cell__item">Type "chrome://settings/content/javascript" In Chrome's address bar</li>
                <li class="c-cell__item">Under "Default Behavior" select "Sites Can Use Javascript (recommended)"</li>
                <li class="c-cell__item">Refresh Chrome</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Opera</p>
                <li class="c-cell__item">Select "Site Settings" (gear wheel symbol) from left margin menu</li>
                <li class="c-cell__item">Type "javascript" in "Search Settings Box"</li>
                <li class="c-cell__item">Select "Site Settings"</li>
                <li class="c-cell__item">Under "Content" on the drop-down menu, select "JavaScript"</li>
                <li class="c-cell__item">Select "Allowed (recommended)"</li>
                <li class="c-cell__item">Refresh Opera</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Safari</p>
                <li class="c-cell__item">From menu bar at top of the window, select "Edit" (Win)/"Safari" (Mac)</li>
                <li class="c-cell__item">From drop-down menu, select "Security" (Win)/"Preferences" (Mac)</li>
                <li class="c-cell__item">Select the "Security" icon/tab (Mac only) at the top of the window</li>
                <li class="c-cell__item">Check the Enable JavaScript checkbox</li>
                <li class="c-cell__item">Close the dialog box to save changes</li>
                <li class="c-cell__item">Refresh your browser</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
              <p class="c-cell__title">Mobile Browsers</p>
                <li class="c-cell__item">Follow the phone/tablet's instructions for your specific device and operating system version</li>
            </ol>
          </div>
      </div>
    </div>

Select allOpen in new window

SCSS

SCSS

.container-bleed {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;     
}

.l-page-wrapper {
  width: 100%;
  height: 100%;
  background: transparent;

  &__title {
    font-family: $font-family-base;
    font-size: 2rem;
    color: $brand-black;
    text-align: center;
  }
}

.l-cell-wrapper {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.c-cell {
  flex: 0 32%;
  justify-content: space-between;
  margin-bottom: 3rem;

  &__title {
    text-align: center;
    font-family: $font-family-base;
    font-size: 1.6rem;
    font-weight: 700;
    color: $brand-secondary;
    margin: 0 auto;
  }

  &__list {
    margin: 0;
    padding: 0;
  }

  &__item {
    display: list-item;
    list-style-type: decimal;
    list-style-position: outside;

    font-family: $font-family-base;
    font-size: 1.2rem;
    color: $brand-black;
    margin-left: 4rem;
    padding: 0;
  }
}

Select allOpen in new window

Compiled CSS

.l-page-wrapper {
  width: 100%;
  height: 100%;
  background: transparent;
}
.l-page-wrapper__title {
  font-family: "fira_sansregular";
  font-size: 2rem;
  color: #312d26;
  text-align: center;
}.l-cell-wrapper {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.c-cell {
  flex: 0 32%;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.c-cell__title {
  text-align: center;
  font-family: "fira_sansregular";
  font-size: 1.6rem;
  font-weight: 700;
  color: #ac793e;
  margin: 0 auto;
}
.c-cell__list {
  margin: 0;
  padding: 0;
}
.c-cell__item {
  display: list-item;
  list-style-type: decimal;
  list-style-position: outside;
  font-family: "fira_sansregular";
  font-size: 1.2rem;
  color: #312d26;
  margin-left: 4rem;
  padding: 0;
}

Select allOpen in new window