Switch content order CSS only / IE11+ Friendly

mobile.css

/*
  I needed to switch the order of content displayed between two sections that each had nested information.
  On desktop section #1 was a left sidebar, section #2 was the main content.
  On mobile these needed to be flipped so the main content would appear before the sidebar content, in a column.
  The solution here worked only so far: http://stackoverflow.com/questions/17455811/swap-div-position-with-css-only
  The main problem with this solution was that on iOS Chrome version ^51.0.2 on iPhone 6 and iPad mini, as well as Safari and whatever default internet browser coems on Android devices...
  ... all content was stacked on top of each other.

 The following solution gave me the effect I was looking for, without content stacking on top of each other.
*/

.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}

/* HTML example

<div class='container'>
 <section class="section1">Some content <p>some nested items<p> </section>
 <section class="section2">Some other content <p>some more nested items<p> </section>
</div>

*/