jquery - Place Sub-Div in New Parent for Mobile/Narrow Width, 3-Col Bootstrap Otherwise -

jsfiddle: https://jsfiddle.net/lukeu3f8/4/

i have 3-column boostrap layout. selecting in col 1 activates 2, 2 activates 3 (like step-by-step wizard).

the issue when browser resized (and in mobile) columns 2 , 3 wrap around column 1 @ bottom. can see if resize jsfiddle window.

initially when page opened, no big deal because no selection has been made. it's ok show 1,2,3 sequentially in single column. once col 1 menu selected, in mobile (or desktop if $(window).width() < 1000 in experience) col 2 , later col 3 must detached/prepended under menuitem li (in front) clicked. think have scroll active li, can come later. other scenarios ok, can keep 3-col layout is.

i need function both on startup , resizing like

    function resizesec2and3() {          var limit = 1000;         // perform detachment if (1) window width < limit, (2) menu selection has been made         if ($(window).width() < limit && currmenuitemindex != -1) {             var col2element = $('#divcol2').detach();             // append div clicked li             // ...         }      } 

but i'm not getting index of clicked li, quick thoughts on indexing , how attach resize event?

i'm not getting index of clicked li, quick thoughts on indexing

i add classes (e.g. menu-item-1) or data attributes (e.g. data-index="1") <li> elements. it's easy if generate menu using js. (otherwise can iterate on existing list items , same.)

var items = [    'menu item 1',     'menu item 2',     'menu item 3'  ];    $(function(){    $.each(items, function(i, e) {       $('#menu').append('<li data-index="'+i+'">'+e+'</li>');    });    $('#menu > li').click(function() {      alert($(this).data('index'));    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <h1>click on items</h1>  <ul id="menu"></ul>

and how attach resize event?

you can attach event handler onresize event assigning function window.onresize or calling window.addeventlistener("resize", myfunction). example:

window.onresize = function(event) {    if (window.innerwidth < 1000) {      $('#mode').text('mobile');    } else {      $('#mode').text('desktop');    }  };  window.onresize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <h1 id="mode"></h1>

and can add/remove classes to/from lists depending on current screen width.

i try use bootstrap's magic classes hidden-breakpoint , visible-breakpoint, way resize event may not needed. see below example, there's nested list on smaller screens , 2 lists on larger ones:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous">    <div class="container">    <div class="row">      <div class="col-md-6">        <h1>menu 1</h1>        <ul>          <li>item 1/1            <ul class="hidden-md hidden-lg">              <li>item 2/1</li>              <li>item 2/2</li>            </ul>          </li>          <li>item 1/2</li>        </ul>      </div>      <div class="col-md-6 hidden-xs hidden-sm">        <h1>menu 2</h1>        <ul>          <li>item 2/1</li>          <li>item 2/2</li>        </ul>      </div>    </div>  </div>

hope help.