Generated by SassMeister.com.

SassMeister-input-HTML.html

<main class="view">
    <header class="view__header">
      <div class="header-area--fb">
        <div class="header-area--fb__primary">
          <h1>Header Area Primary, Probably a Title</h1>
        </div>
        <div class="header-area--fb__secondary">
          <p>Header Area Secondary, Dates, Authors, etc.</p>
        </div>
      </div>
      <div class="header-area--fb">
        <div class="header-area--fb__primary">
          <p>Header Area Primary, Probably a Subtitle</p>
        </div>
      </div>
    </header>
  </main>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "bourbon/bourbon";
@import "bourbon/bourbon";
@import "neat/neat";

$color-primary: #09c;
$spacing-medium: 10px;

$screen-medium: 768px;
$screen-large: 1024px;

.view__header {
  border: 1px solid $color-primary;
}

.header-area--fb {
  display: flex;
  align-items: center;
  
  %base-inner {
    display: flex;
    align-self: stretch;
    align-items: center;
    padding: $spacing-medium;
  }
  
  &__primary {
    @extend %base-inner;
    flex-grow: 1;
    background-color: lightgray;
  }
  
  &__secondary {
    @extend %base-inner;
    background-color: lightblue;
  }
  
  // - Medium Screen 
  @media only screen and (max-width: $screen-medium) {
    flex-direction: column;
    &__primary, &__secondary {
      justify-content: center;
      text-align: center;
    }
  }
  
  // Medium Screen +
  @media only screen and (min-width: $screen-medium) {
    flex-direction: row;
    &__primary, &__secondary {
      justify-content: flex-start;
      text-align: left;
    }
  }
  
}

SassMeister-output.css

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

.view__header {
  border: 1px solid #09c;
}

.header-area--fb {
  display: flex;
  align-items: center;
}

.header-area--fb .header-area--fb__primary, .header-area--fb .header-area--fb__secondary {
  display: flex;
  align-self: stretch;
  align-items: center;
  padding: 10px;
}

.header-area--fb__primary {
  flex-grow: 1;
  background-color: lightgray;
}

.header-area--fb__secondary {
  background-color: lightblue;
}

@media only screen and (max-width: 768px) {
  .header-area--fb {
    flex-direction: column;
  }
  .header-area--fb__primary, .header-area--fb__secondary {
    justify-content: center;
    text-align: center;
  }
}

@media only screen and (min-width: 768px) {
  .header-area--fb {
    flex-direction: row;
  }
  .header-area--fb__primary, .header-area--fb__secondary {
    justify-content: flex-start;
    text-align: left;
  }
}

SassMeister-rendered.html

<main class="view">
    <header class="view__header">
      <div class="header-area--fb">
        <div class="header-area--fb__primary">
          <h1>Header Area Primary, Probably a Title</h1>
        </div>
        <div class="header-area--fb__secondary">
          <p>Header Area Secondary, Dates, Authors, etc.</p>
        </div>
      </div>
      <div class="header-area--fb">
        <div class="header-area--fb__primary">
          <p>Header Area Primary, Probably a Subtitle</p>
        </div>
      </div>
    </header>
  </main>