Rearrange Div's From Side-side To Top-down In Css

I'm looking to arrange an intranet page in a CSS Responsive manner. I'm trying to use @media breakpoints to rearrange four basic elements (nested in two divs) in the following mann

Solution 1:

In your media query, add width: 100% to the first DIV and remove position: absolute from the second DIV.

Also, add flex-direction: column; to the second div to get the vertical stacking and flex-direction: column-reverse; to their container (whose class I made up below, but which has to wrap the two DIVs) to get the reversed order of DIVs when stacking:

.container {
   display: flex;
   flex-direction: column-reverse;
 }        
.divOne { 
   display: flex;
   width: 100%;            
}
.divTwo {
   display: flex;
   flex-direction: column;
   width: 100%;
}

Solution 2:

This is a reduced showcase how it will work.

Also note that display:flex; will not work in all browsers - some of them provide vendor prefixes, check: http://caniuse.com/#search=flex and http://autoprefixer.github.io/

To learn more about flexbox, see here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container{
  display:flex;
  flex-flow:row wrap;
  text-align:center; // only for code snippet, not needed when contents are there
}
.divOne{
  order:10;
  background:#F1D2E0;
  width:100%;
}
.divTwo{
  order:5;
  background:#C1E7CD;
  width:100%;
}
.adhDiv,
.clinDiv,
.postDiv,
.timeDiv {
  height: 400px;
  background:#C1DDE7;
  margin:2em;
}

@mediaonly screen and (min-width: 1100px) {
  .divOne{
    flex:1;
    flex-basis: 60%;
    order:5;
  }
  .divTwo{
    flex:1;
    flex-basis: 40%;
    order:10;
  }
}

<divclass="container"><divclass="divOne"><h2>Div1</h2><divclass="postDiv"><h3>Post</h3></div></div><divclass="divTwo"><h2>Div2</h2><divclass="timeDiv"><h3>Time</h3></div><divclass="adhDiv"><h3>Adh</h3></div><divclass="clinDiv"><h3>Clin</h3></div></div></div>

Solution 3:

Thanks, Thomas. I tinkered around with your code and added some from a JS Fiddle to work out my solution below. I love it! Thanks!

<script type="text/javascript">

var adhcal =  '<iframe src="..."></iframe>';
var clincal = '<iframe src="..."></iframe>';
var timeUrl = '<iframe src="..."></iframe>';
var scoreImg = '<img width = "94%" src="...">';
functionstart()
{
 
 var dOne = $('<div>').addClass('divOne');
 var dTwo = $('<div>').addClass('divTwo');
 var container = $('<div>').addClass('container');
 container.append(dOne).append(dTwo);
 $('body').append(container);
 
 var timeDiv = $('<div id = "timeDiv"></div>').addClass('timeDiv');
 dTwo.append(timeDiv);
 var timeTrack = $(timeUrl);
 timeDiv.append(timeTrack)
 timeTrack.load(function(){ 
 
 try{
    var timeHeight = document.getElementById('timeTrack').contentWindow.document;
    var body = timeHeight.body, html = timeHeight.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
                           html.clientHeight, html.scrollHeight, html.offsetHeight);
      }
  catch(e){var height = 500;}
  
  timeDiv.height(height);});
 
 var adhDiv = $('<div id = "adhDiv"></div>').addClass('adhDiv');
 dTwo.append(adhDiv);
 adhcal = adhcal.replace('height="100%"', 'height="'+((adhDiv.height() > 0)?adhDiv.height():'400')+'"');
 adhDiv.append(adhcal);
 
 var clinDiv = $('<div id = "clinDiv"></div>').addClass('clinDiv');
 dTwo.append(clinDiv);
 clincal = clincal.replace('height="100%"', 'height="'+((clinDiv.height() > 0) ? clinDiv.height():'400')+'"');
 clinDiv.append(clincal);
 
 var wrapDiv = $('<div id = "wrapDiv"></div>').addClass('wrapDiv');
 var postDiv = $('<div id = "postDiv"></div>').addClass('postDiv');
 wrapDiv.append('<H1>Blog Title</H1>').append(postDiv);
 dOne.append(wrapDiv);
 for(var p = 0; p < DATA.posts.length; p++)
 {
   postDiv.append('<h2>'+DATA.posts[p].title
   +'</h2><p class = "date">Published: '+moment(newDate(DATA.posts[p].date)).format('L')
   +'</p><p class="post">'
   +DATA.posts[p].html
   +'</p>').append('<hr>');
 }
 var scoreDiv = $('<div id = "scoreDiv"></div>').addClass('scoreDiv');
 dTwo.append(scoreDiv);
 scoreDiv.append(scoreImg);

}
</script>

<style>

   H2{
    font-size: 2.00rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
      }
   H1{
       font-size: 2.50rem;
       font-family: 'Roboto', sans-serif;
       font-weight: 325;
   }      
 .date{
    font-size: 1.00rem;
    color: #595959;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    
    } 
    .post{
    font-size: 1.50rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    }  
    

  .postDiv,  
    {
    margin:20em;
    overflow-y: hidden;
    overflow-x: hidden;
    }
    
  .timeDiv,
  .scoreDiv,{
     height: 400px;
     margin:2em;
     width: 100%;
           }
           
   .adhDiv,
  .clinDiv,
    {
     height: 200px;
     margin:2em;
     width: 100%;
    }

@mediaonly screen and (min-width: 768px) {
  .container{
             width:98%;
            }
     .divOne{ 
           float: left;
           left:0;
           max-width:69%
            }
     .divTwo{
          float: right;
          max-width: 30%;
            }
   .wrapDiv {
           position: relative;
         max-height: 1200px;
            padding: 0;
             margin: 5%5%5%5%;
          overflow-y: auto;
          overflow-x: hidden;
            }
}
@mediaonly screen and (max-width: 767px) { 

  .container{
   width:100%;
   display:flex;
   flex-flow:row wrap;
   }
   .divOne{
     order:5;
     width:100%;
     background-color: #f9f9f9;
          }
          
   .divTwo{
     display: inline-block;
     width:100%;
           } 
  
  .postDiv
           {width: 100%}
  .timeDiv {  
  
  .wrapDiv {
   position: relative;
    max-height: 600px;
    padding: 0;
    margin: 5%5%5%5%;
    overflow-y: auto;
    overflow-x: hidden;
}

     height: 400px;
     width: 100%;
           }
  .adhDiv,
  .clinDiv,
           {
     position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
           }
}
</style>

<!DOCTYPE html><html><head><basetarget="_top"><metaname="viewport"content="width=device-width, initial-scale=1.0"><script>varDATA = <?!= JSON.stringify(dataFromServerTemplate) ?>;</script>
    <?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
  </head><bodyonload="start()">
  <?!= HtmlService.createHtmlOutputFromFile('Scripts').getContent();?>
   <?!= HtmlService.createHtmlOutputFromFile('JS-Intranet').getContent();?>
  </body></html>