title: Trigger Responsiveness based on Parent's element Width not on Window DOM's width
body: <p>I'd like to trigger the responsive approach for bootstrap when its Parent container is on certain size, the Children will response accordingly.</p>
  
  <blockquote>
    <p>i.e if container is <code>&lt; 1200</code> , Children elements will transform to
    <strong>MD</strong> instead of just remaining to <strong>LG</strong></p>
  </blockquote>
  
  <p><a href="https://jsfiddle.net/mq1b8qyd/12/" rel="nofollow noreferrer">Fiddle Example</a></p>
  
  <ol>
  <li>Resize on fiddle at least <code>1200</code> pixels for the red bordered container called <code>#page-content-wrapper</code></li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/HDNNv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HDNNv.png" alt="enter image description here"></a></p>
  
  <ol start="2">
  <li>Click the <code>Toggle Menu</code> button which makes the <code>#page-content-wrapper</code> to a <code>950</code> pixels that is considered to be an MD in bootstrap, forms should transformed to MD also but remains to LG</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/NZ9SL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NZ9SL.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <ol start="3">
    <li>Here is my intended output after clicking the <code>Toggle Menu</code> button. The <code>#page-content-wrapper</code> is less than 1200 which is MD then , the
    Children elements transforms into MD.</li>
    </ol>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/zSnd6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zSnd6.png" alt="enter image description here"></a></p>