APG-FLEX : DEMO

Resize your window to see the order of the collapses: purple > green > red > blue (yellow never collapes)
Get the CSS code!

Simple Example

flex: 1
flex: 1
flex: 1
B
flex: 1
flex: 1
flex: 1
flex: 1

	<div class="demo">
		<div class="arowsm acontainer">	<!-- Row collapsing at 576px -->
			<div>flex: 1</div>			<!-- Column size 1/5 of the full width -->
			<div class="flex2">		 	<!-- Column size 2/5 of the full width -->
				<div class="arowlg">	<!-- Nested row collapsing at 992px-->
					<div>flex: 1</div>  <!-- Column size 1/4 of 2/5 of the full width -->
					<div>flex: 1		<!-- Column size 1/4 of 2/5 of the full width -->
						<div>B</div>	<!-- Block (not a column!) -->
					</div>  
					<div>flex: 1</div>  <!-- Column size 1/4 of 2/5 of the full width -->
					<div>flex: 1</div>  <!-- Column size 1/4 of 2/5 of the full width -->
				</div>
			</div>
			<div>flex: 1</div> 			<!-- Column size 1/5 of the full width -->
			<div>flex: 1</div>		    <!-- Column size 1/5 of the full width -->
		</div>
	</div>
			

Complete Example

flex1
flex1
flex1
flex1
flex1
flex1
flex1
flex1
flex1
flex1
flex1
flex1
flex3
flex1
flex1
flex6
flex1
flex1
flex1
flex1
flex1
flex1
flex1
flex1

  <div class="arow">				<!-- arow = no collapse -->
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
	<div>flex1</div>
  </div>
  <div class="arowsm acontainer"> 	<!-- arowsm = collapse at 576px ; acontainer = max-width: 1070px -->
	<div class="flex3">flex3</div> 	<!-- div = flex1 ; flex3 = style="flex: 3" -->
	<div>flex1</div>
  </div>
  </div>
	<div class="arow">
	  <div>
		<div class="arowsm acontainer">
		  <div>flex1</div>
		  <div class="flex6">flex6 
			<div class="arowmd"> 	<!-- arowmd = collapse at 768px -->
			  <div>
				<div class="arowsm">
				  <div>
					<div class="arowmd">
					  <div>flex1</div>
					  <div>flex1</div>
					</div>
				  </div>
				  <div>flex1</div>
				</div>
			  </div>
			  <div>
				<div class="arowlg"> 	<!-- arowlg = collapse at 992px -->
				  <div>flex1</div>
				  <div>flex1</div>
				</div>
			  </div>
			</div>
		  </div>
		  <div>flex1</div>
		  <div>flex1</div>
		</div>
	  </div>
	</div>
  </div>