javascript - Responsive Jquery/JS/CSS to collapse 2 divs into tabs -

i have 2 div boxes side side. on mobile dont work well, make them responsive collapsing 1 box on top of other, clickable tab switch between 2 boxes.

the base code 2 boxes:

css :

.form {     color: white;     max-width: 510px;     height: 384px;     text-align: center;  }  .form-left {     background-color: red;       margin-right: 5%; }  .form-right {     background-color: blue;     margin-left: 5%; } 

html :

<div class="row">     <div class="small-6 columns">         <div class="form form-left">             <h2 class="form-title">one</h2>             <p class="artist">some paragraph text.</p>         </div>     </div>     <div class="small-6 columns">         <div class="form form-right">             <h2 class="form-title">two</h2>             <p class="shopper">some more paragraph text.</p>         </div>     </div> </div> 

so simple demo here.

when resize result pane, should convert tabbed view.

i assume can done jquery, wouldn't have clue start ?