I'd like to ask for help related to repositioning of div from right side of thumbnail (after thumbnail is clicked) to below enlarged image.
At example page below there is apartment list with 5 rows, each row has left div (col-md-4) containing thumbnail and right div (col-md-8) containing text and button.
After thumbnail is clicked it enlarge image to full width which then need to push right div below enlarged image.
On example page 1., 3., 4. and 5. apartment list rows has initial position: thumbnail left and text/button right.
2nd apartment list row show example of position with large image above and text/button below (after thumbnail is clicked).
Here is sample of apartment row html, left thumbnail div and right text/button div:
<div class="padding20"> <div class="col-md-4 offset-0"> <div class="slider"> <div><img src="images/large/apartments-m-4.jpg" width="237" height="127" /></div> <div><img src="images/large/apartments-m-4.jpg" /></div> <div><img src="images/large/apartments-m-6.jpg" /></div> </div> </div> <div class="col-md-8 offset-0"> <div class="col-md-11 right"> <p><span class="myblue2 opensans size18"> Studio - sea view <span class="right myblue size14"><img src="images/guests2.png" class="guests4" alt=""/> <span class="green size16"> 50 € </span></span></span></p> <p onclick="mySelectUpdate()"><a href="#collapse1">BOOK</a></p> <span class="size14"> 33 m2 - dining-room - kitchen - garden - bathroom </span> <span class="size13"> Air condition, tv/clock, showerbath, telephone... </span> </div> </div> </div>
Used Super Simple Slider for thumbnail and images, css and js are here:
I'll appreciate if you have any idea to solve this reposition when thumbnail is replaced with large image and right content is moved below that large image.