Alright, after some adjustments and perhaps more wrapping than you may be accustomed to, I believe I am getting close to the desired layout.
Main Concept
For this design, we require rows that consist of three columns each. Each column div contains a "content" div which will hold the actual content along with its background color.
By utilizing `flexbox`, we can specify that the center column (and its content div) should have a fixed width while the side columns are flexible.
The content divs within the side columns adjust their width automatically and their alignment is controlled using properties like `flex-end/start`.
Once the media query kicks in, the rows transform into columns and the previous 'column' divs shift into rows within that column.
.row {
display: flex;
margin-bottom: .5em;
}
.content {
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
}
.col {
flex: 1;
display: flex;
}
.center {
flex: 0 0 350px;
display: flex;
margin: 0 .5em;
}
.center .content {
background: pink;
flex: 1 1 100%;
}
.left {
justify-content: flex-end;
}
.left .content {
flex: 0 1 auto;
background: blue;
}
.right .content {
flex: 0 1 auto;
background: green;
}
@media screen and (max-width:700px) {
.row {
flex-direction: column;
}
.col {
flex: 1;
justify-content: flex-end;
}
.center {
margin: 0;
}
}
<div class="container">
<div class="row">
<div class="col left">
<div class="content">Lorem ipsum dolor sit amet.</div>
</div>
<div class="col center">
<div class="content">Lorem </div>
</div>
<div class="col right">
<div class="content">Lorem ipsum.</div>
</div>
</div>
<div class="row">
<div class="col left">
<div class="content">Lorem ipsum dolor sit. Lorem ipsum.</div>
</div>
<div class="col center">
<div class="content">Lorem ipsum dolor.</div>
</div>
<div class="col right">
<div class="content">Lorem</div>
</div>
</div>
</div>
Take a look at the Codepen Demo
There are still some refinements needed depending on the breakpoint desired and the specific appearance for the 'mobile' sized design...but it seems like a promising start has been made here.