Question

我有8个div，在台式机和平板电脑上应该并排有4个div，其中的链接会在全部4个宽度的下面打开一个div。在移动设备上，我希望通过链接打开的div显示在具有相应链接的div下方。

起初我尝试了一个功能

function resize(){
if($(window).width() < 480)
{
$("#service1").insertAfter("#service-box1");
}
}

现在我正在尝试使用引导程序来执行此操作，但是我不知道应该使用哪个版本或如何精确地使用8 divs。

这是桌面顺序中的html

<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>

这是移动订单中的html

<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>

这是它应在桌面上显示的方式： https://imgur.com/IJPUOhi

这是它应在移动设备上显示的方式（屏幕669px及以下）： https://imgur.com/8B7BUVx

Answer 1

最好的选择是使用flexbox及其flex-order css属性。

一个例子：

.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>

使用引导程序更改8格的顺序

1 个答案: