Styjun

I have 8 divs, on desktop and tablet there should be 4 divs side by side, with links that open a div underneath all 4 at full width. on mobile i want the div thats opened by the link to display underneath the div with the corresponding link.

At first I tried a function

function resize()
if($(window).width() < 480)

$("#service1").insertAfter("#service-box1");

Now I'm trying to do so with bootstrap, but I don't know which version should be used or how exactly to do it with 8 divs.

Here's the html in desktop order

<div id="services-container" class="row">


 <div class="service" id="service-box1">
 <h1>Title</h1>
 <a class="learn-more" id="show1" data-href="service1">Learn More</a>
 </div>
 <div class="service" id="service-box2">
 <h1>Title</h1>
 <a class="learn-more" id="show2" data-href="service2">Learn More</a>
 </div>
 <div class="service" id="service-box3">
 <h1>Title</h1>
 <a class="learn-more" id="show3" data-href="service3">Learn More</a>
 </div>
 <div class="service" id="service-box4">
 <h1>Title</h1>
 <a class="learn-more" id="show4" data-href="service4">Learn More</a>
 </div>


 <div class="service-content" id="service-content1">
 <h1>Service1</h1>
 </div>
 <div class="service-content" id="service-content2">
 <h1>Service2</h1>
 </div>
 <div class="service-content" id="service-content3">
 <h1>Service3</h1>
 </div>
 <div class="service-content" id="service-content4">
 <h1>Service4</h1>
 </div>


</div>

Here's the html in mobile order

<div id="services-container" class="row">

 <div class="service" id="service-box1">
 <h1>Title</h1>
 <a class="learn-more" id="show1" data-href="service1">Learn More</a>
 </div>
 <div class="service-content" id="service-content1">
 <h1>Service1</h1>
 </div>

 <div class="service" id="service-box2">
 <h1>Title</h1>
 <a class="learn-more" id="show2" data-href="service2">Learn More</a>
 </div>
 <div class="service-content" id="service-content2">
 <h1>Service2</h1>
 </div>

 <div class="service" id="service-box3">
 <h1>Title</h1>
 <a class="learn-more" id="show3" data-href="service3">Learn More</a>
 </div>
 <div class="service-content" id="service-content3">
 <h1>Service3</h1>
 </div>

 <div class="service" id="service-box4">
 <h1>Title</h1>
 <a class="learn-more" id="show4" data-href="service4">Learn More</a>
 </div>
 <div class="service-content" id="service-content4">
 <h1>Service4</h1>
 </div>

</div>

This is how it should display on desktop:
https://imgur.com/IJPUOhi

This is how it should display on mobile (screens 669px and below):
https://imgur.com/8B7BUVx

Your best bet would be to use flexbox, in conjunction with its flex-order css attribute.

An example:

.container 
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;

.box1,
.box2,
.box3,
.box4 
 width: 25%;
 background-color: grey;


.box5 
 width: 100%;
 background-color: grey;


@media (max-width: 400px) 
 .box1 
 order: 1;
 
 .box2 
 order: 3;
 
 .box3 
 order: 4;
 
 .box4 
 order: 5;
 
 .box5 
 order: 2;
 
 .box1,
 .box2,
 .box3,
 .box4 
 width: 100%;
 

<div class="container">
 <div class="box1">box 1</div>
 <div class="box2">box 2</div>
 <div class="box3">box 3</div>
 <div class="box4">box 4</div>
 <div class="box5">box 5</div>
</div>