Using flexbox to change layout at different breakpoints
<p>I'm trying to arrange a series of elements in a different layout for "mobile" screens vs large screens. </p>

<p>Basically, on mobile screens I want a title to span the entire width at the top, centered. Underneath is an image and a group of icons to the right in the same row. </p>

<p>On larger screens I want the title to be adjacent to the image in the same column, but above the icons (see image for desired results).
<a href="https://i.stack.imgur.com/pSXxH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pSXxH.png" alt="enter image description here"></a></p>

<p>By playing with the flexbox rules and the order property, I can achieve 2/3 of this effect. The way I have it written, I can get the title next to the image, but the icon group is always underneath the image. </p>

<p><a href="https://jsfiddle.net/ktomasso/vnbt3h4z/" rel="nofollow noreferrer">See my fiddle for my attempt</a></p>

<p>HTML</p>

<pre><code>&lt;div class="container"&gt;
 &lt;div class="row"&gt;
    &lt;h1 class="title"&gt;This is my title&lt;/h1&gt;
    &lt;div class="image"&gt;
     &lt;img src="https://placem.at/things?w=300&amp;h=400"&gt;
    &lt;/div&gt;
    &lt;div class="icon-section"&gt;
      &lt;div class="icon"&gt;
         &lt;img src="http://placehold.it/40x40"&gt;
      &lt;/div&gt;
      &lt;div class="icon"&gt;
         &lt;img src="http://placehold.it/40x40"&gt;
      &lt;/div&gt;
      &lt;div class="icon"&gt;
         &lt;img src="http://placehold.it/40x40"&gt;
      &lt;/div&gt;
      &lt;div class="icon"&gt;
         &lt;img src="http://placehold.it/40x40"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>SCSS</p>

<pre><code>.container {
  max-width: 500px;
  @media (min-width: 800px) {
    max-width: 750px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
}
.title {
  width: 100%;
  text-align: center;
  @media (min-width: 800px) {
    flex: 0 0 50%;
    order: 2;
    text-align: left;
  }
}
.icon-section {
  padding-left: 20px;
  @media (min-width: 800px) {
    display: flex;
    order: 3;
  }
}
.icon {
  @media (min-width: 800px) {
    margin-right: 5px;
  }
}
</code></pre>

<p>I'm not married to using flexbox and I'm flexible with my markup. What I want to avoid, however, is having two instances of my heading and hiding one depending on the screen size. Also because the title will be dynamic, I cannot use absolute positioning. </p>