title: Using jQuery UI resizable() with Twitter Bootstrap 3 grid classes
body: <p>I would like to improve this vertical splitter : <a href="http://jsbin.com/xuyosi/1/edit?html,css,js,output" rel="nofollow">http://jsbin.com/xuyosi/1/edit?html,css,js,output</a>.  </p>
  
  <p><strong>use cases:</strong></p>
  
  <blockquote>
    <blockquote>
      <ul>
      <li><p>As the site uses Bootstrap, when I use the splitter to expand Column-1, Column-2 comes under column-1 which I do not want, rather I
      want them to be <strong>near each other</strong> and  the corresponding column width must increase.</p></li>
      <li><p>Only upon screen resize/ mobile view I want those columns stacked upon each other and at that time the <strong>splitter must not be usable</strong>.</p></li>
      </ul>
    </blockquote>
  </blockquote>
  
  <p>Ultimately, the solution to this must be: Detect 2 columns are near each other -  <strong>If so</strong>: Allow column resize and do not push the column down while resizing.</p>
  
  <p>Thanks in advance!</p>