css - Responsive layout side by side on desktop, overlay with nav on mobile -

I'm looking for a responsive pattern where I have two pages (or it's called div)

  | -------- | -------- | | | | | P1 | P2. | | | | | | | -------- | -------- |   
 As I reduced the width of the page, or see it on a mobile, it falls on the same page. Let's say - & gt; Displays a link to reach page two in the upper right corner.  
  | -------- | | - & gt; | | | | P1 | | | | -------- |   
 and similar to page 2, & lt; - Return to page one  
  | -------- | | & Lt; - | | | | P2. | | | -------- |   
 How can anyone get this idea? I have a library in which it has to support, such as a bootstrap or foundation or "do it yourself".  
 
 
 You can get it by using CSS It is:  
  JSFiddle -   
  
 
 
  .div {width: 50%; Height: 100px; Swim left; } .div-1 {background: red; } .div-2 {background: blue; } @ Media (max-width: 480px) {.div {float: none; Width: 100%; }}   
  & lt; Div class = "div div-1" & gt; & Lt; / Div & gt; & Lt; Div class = "div div-2"> gt; 
 JSFiddle -   
  
 
 
  body {margin: 0; Hidden flurry; } A {color: white; Width: 100%; Height: 100%; Display: Inline-block; Font-size: 36px; Line-height: 100px; Text align: center; } .div {width: 50%; Height: 100px; Swim left; } .div-1 {background: red; } .div-2 {background: blue; } @ Media (max-width: 680 px) {.div -p {width: 200%; }}   
  & div; Div class = "div-p" & gt; & Lt; Div id = "div-1" class = "div div-1" & gt; & Lt; A href = "# div-2" & gt; Page 1 & lt; / A & gt; & Lt; / Div & gt; & Lt; Div id = "div-2" class = "div div-2" & gt; & Lt; A href = "# div-1" & gt; Page 2 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt;