Dynamically change the div position as per the window width

Question

This is a complex problem but it is a good idea also . The following code I used for show the child category as the parent category and is working:

 $(function(){ $(".common-parrent-class").on("click",function(){ $child = $(this).attr('class').split(" ")[0].split("-")[0]+"-child"; var status = $('.'+$child).css('display'); $('.'+$child).toggle(); if(status == 'none'){ if($(this).attr('class').split(" ")[0]==='class5-parrent'){ $('.'+$child).appendTo('.after-5'); $(".after-class").css("display","none"); $(".after-5").css("display","flex"); } else{ $('.'+$child).appendTo('.after-4'); $(".after-class").css("display","none"); $(".after-4").css("display","flex"); } $(".common-child-class").css("display","none"); $('.'+$child).css("display","block"); } if(status == 'block'){ $(".after-class").css("display","none"); } }); $(window).resize(function() { var windowSize = $(window).width(); }); }); 

 .after-1, .after-2, .after-3, .after-4, .after-5{ border: 1px solid black; display:none; width:100%; } .common-parrent-class{ border:1px solid black; margin:2px; float:left; width:20%; cursor:pointer; } .main, .sub-category{ display: inline-table; padding:22px; border:1px solid black; } .sub-category{ margin-top:10%; display:none; width:100%; } .common-child-class{ display:none; width:100%; } .inner{ float:left; width:24%; margin:2px; } @media screen and (max-width: 299px) and (min-width:200px) { .common-parrent-class, .inner{ width:60%; } } @media screen and (max-width: 420px) and (min-width:300px) { .common-parrent-class, .inner{ width:40%; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-6 main"> <div class="main-category"> <div class="class1-parrent common-parrent-class">Class1</div> <div class="after-1 after-class"></div> <div class="class2-parrent common-parrent-class">Class2</div> <div class="after-2 after-class"></div> <div class="class3-parrent common-parrent-class">Class3</div> <div class="after-3 after-class"></div> <div class="class4-parrent common-parrent-class">Class4</div> <div class="after-4 after-class"></div> <div class="class5-parrent common-parrent-class">Class5</div> <div class="after-5 after-class"></div> </div> <div class="sub-category"> <div class="class1-child common-child-class"> <div class="class1-child-inner inner">Class 1</div> <div class="class1-child-inner inner">Class 1</div> <div class="class1-child-inner inner">Class 1</div> <div class="class1-child-inner inner">Class 1</div> </div> <div class="class2-child common-child-class"> <div class="class2-child-inner inner">Class 2</div> <div class="class2-child-inner inner">Class 2</div> <div class="class2-child-inner inner">Class 2</div> <div class="class2-child-inner inner">Class 2</div> </div> <div class="class3-child common-child-class"> <div class="class3-child-inner inner">Class 3</div> <div class="class3-child-inner inner">Class 3</div> <div class="class3-child-inner inner">Class 3</div> <div class="class3-child-inner inner">Class 3</div> </div> <div class="class4-child common-child-class"> <div class="class4-child-inner inner">Class 4</div> <div class="class4-child-inner inner">Class 4</div> <div class="class4-child-inner inner">Class 4</div> <div class="class4-child-inner inner">Class 4</div> </div> <div class="class5-child common-child-class"> <div class="class5-child-inner inner">Class 5</div> <div class="class5-child-inner inner">Class 5</div> <div class="class5-child-inner inner">Class 5</div> <div class="class5-child-inner inner">Class 5</div> </div> </div> </div> </div> </div> 

But what I need, is when user click on any of the parent class show the child class after the raw of it's parent class.

1) When in window width 1000px first row of parents are Class1,Class2,Class3,Class4 .

Click on Class1 to Class4 then it's child div is need to show in "after-4" class

if click on Class5 then child div need to show in "after-5" class

2) When in window width 360px first row of parents are Class1, Class2

click on Class1 & Class2  then it's child div is need to show in "after-2" class 

  if click on Class3 then child div need to show in "after-4" class

3) When in window width 254px first row of parents are Class1

click on Class1 then it's child div is need to show in "after-1" class 


So how can I do this ? Also when the window is resized child div need to come automatically in corresponding after class. 

Please see the jsfiddle https://jsfiddle.net/felixtm/qxbzpvr1/3/

Answer 1

UPDATE

updated the JSFiddle to match the requirements

---

Hi @Felix the answer you are looking for is quite similar to the link given

and here's sample jsFiddle https://jsfiddle.net/df9nykhL/ for the question

By using the method given you can get the number of div's displayed in the first row then you can use it according to your needs

function countFirstRowItems(parentSelector, childSelector){
    var count = 0, theTop = undefined;
    $(parentSelector + " > " + childSelector).each(function(){
        var thisTop = $(this).offset().top;
        if(theTop === undefined){
            theTop = thisTop;
        }
        if(thisTop != theTop){
            return false;
        }
        count++;
    });
    return count;
}
var itemsDisplayedInFirstRow = countFirstRowItems(".main-category",".common-parrent-class");

How to count the number of elements on the first row of their parent element