<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque ...</p>
</article>
<aside class="aside aside-1">Product #1 photo</aside>
<aside class="aside aside-2">Product #1 details</aside>
<!--<aside class="aside aside-3">Product #2 photo</aside>-->
<!--<aside class="aside aside-4">Product #2 details</aside>-->
<footer class="footer">Footer</footer>
</div>

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;height:300px;
}

.aside-2 {
  background: hotpink;height:300px;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}


body {
  padding: 2em;
}