<div id="regionA" class="region"></div>
<div id="regionB" class="region"></div>
<div id="regionC" class="region"></div>

<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper fermentum turpis vitae vestibulum. Suspendisse sodales convallis augue. Vivamus et diam eu neque pellentesque blandit in ut neque. Quisque dapibus ante massa, molestie tempor erat malesuada mollis. In enim sapien, sollicitudin a varius at, placerat laoreet urna. Morbi eget venenatis nunc. Nam vulputate tellus eget dolor feugiat auctor. Etiam in venenatis libero. Donec volutpat nisl sit amet scelerisque mollis. Vivamus commodo sapien nec lacus euismod, fermentum pretium nisi porta.

Nullam imperdiet, nibh vel auctor dapibus, magna odio varius ipsum, vitae dapibus sem odio vitae quam. Suspendisse potenti. Mauris vitae lorem sit amet massa adipiscing consectetur. Aenean et massa et nulla ullamcorper accumsan non a neque. Maecenas blandit nulla vitae venenatis facilisis. Suspendisse neque neque, hendrerit sed tellus ac, condimentum viverra nisl. In ac varius ligula.

Aliquam rhoncus porta nulla, in posuere nibh rhoncus sed. Sed eros sem, fringilla sed tristique vel, facilisis non tellus. Cras ut tincidunt tellus, non bibendum urna. Morbi ligula sem, interdum in pharetra quis, sollicitudin quis dolor. Maecenas in massa quis magna fermentum malesuada. In vitae felis non tellus aliquam consequat in non urna. Fusce non neque quis leo aliquam gravida. Praesent tincidunt ligula mauris. Donec congue magna nisi, nec molestie dui mollis non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam consectetur dolor vitae imperdiet blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Nam convallis erat et tellus euismod, et ultrices nisi accumsan. In hac habitasse platea dictumst. Nunc erat felis, varius a euismod et, elementum ac justo. Integer tempus non risus gravida pharetra. Pellentesque ac risus vel metus adipiscing rutrum non eget enim. Maecenas pretium dapibus lacus. Sed non velit vitae ligula mattis placerat. Aenean a orci purus. Maecenas non neque pharetra, placerat ante iaculis, molestie orci. Aenean consectetur pretium dapibus. Suspendisse quis nisl tellus. Sed porta ipsum in congue sollicitudin. Phasellus interdum et elit vitae tempus.

Nullam lorem justo, tincidunt sed nisl ac, suscipit blandit arcu. Curabitur quis diam mauris. Cras tristique sed massa a sollicitudin. Sed ullamcorper nisl in dui vulputate, ut gravida urna semper. Phasellus a neque vel ipsum lobortis suscipit quis non nibh. Ut ante dui, ornare quis mi sit amet, ornare vestibulum libero. Donec dapibus felis vitae purus tristique, ut dictum erat pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus et mi et sapien iaculis porta id non ligula. Cras nec enim velit. Aenean mollis consequat ipsum, sodales scelerisque dolor sodales nec. Pellentesque vehicula posuere sapien ut sollicitudin. Maecenas tellus nisi, hendrerit ut dui ac, venenatis fermentum mi. Fusce luctus velit eros, at malesuada odio malesuada sed. Curabitur tempor sed leo vitae ullamcorper. Donec iaculis massa felis, ac tincidunt nunc feugiat et.
</div>
html{
  font-family: helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

#regionA{
  max-width: 30rem;
  width: 50%;
  height: 200px;
}

#regionB{ 
  max-width: 30rem;
  width: 50%;
  height: 200px;
  margin-left: 15rem;
}

#regionC{ 
  max-width: 30rem;
  width: 50%;
  margin-left: 7rem;
}

#content{
  -webkit-flow-into: myFlow;
}

.region{
  -webkit-flow-from: myFlow;
}

@media screen and (max-width: 500px) {
  #content{
     -webkit-flow-into: none; 
  }
  
  .region{
    display: none;  
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s.cdpn.io/28727/feature-detect-regions_1.js