Using flexbox to change layout at different breakpoints

I'm trying to arrange a series of elements in a different layout for "mobile" screens vs large screens.

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.

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).

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.

See my fiddle for my attempt

HTML

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

SCSS

.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;  }}

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.