Pushing a nested div underneath its ancestor for mobile

Pushing a nested div underneath its ancestor for mobile

Is there a jQuery way to move a nested div underneath its great grandparent for mobile view. Here's what I've started:  https://codepen.io/Codewalker/pen/aaPRrz 

One thought is to create this twice, hiding one and showing the other, depending on the device/width.

  2. <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">

  4. <div class="container" style="background:#ddd">
  5.     <div class="num-container">
  6.         <div class="num-thumb">
  7.             <img src="https://dummyimage.com/71x389/000000/fff&text=Side" class="img-responsive imgNum">
  8.         </div>
  9.         <div class="num-content" style="background:#ddd">
  10.             <h2 class="num-title">Grandparent goes right here</h2>
  11.             <p>This along with that image off to the left is the grandparent div. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. </p>
  12.             <div class="row">
  13.                 <div class="col-sm-5">
  14.                     <h5>Content col-sm-5</h5>
  15.                     <p>Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. </p>
  16.                 </div>
  17.                 <div class="col-sm-7" style="background:orange">
  18.                     <div class="vid-container">
  19.                         <div class="vid-thumb">
  20.                             <img src="https://dummyimage.com/17x158/000000/fff" />
  21.                         </div>
  22.                         <div class="vid-content">
  23.                           <h5>Content col-sm-7</h5>
  24.                           <p>For mobile devices, this orange div needs to wrap underneath the entire gray div. For mobile devices, this needs to wrap underneath the entire gray div.For mobile devices, this needs to wrap underneath the entire gray div.For mobile devices, this needs to wrap underneath the entire gray div.For mobile devices, this needs to wrap underneath the entire gray div. </p>
  25.                         </div>
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </div>
  31. </div>