Question

我有4个div，每个div都包含一个链接，该链接会在所有4个div下面打开一个新的div（这是有关服务的部分），对于移动屏幕（669px及以下），我需要打开链接的div才能显示在div下方包含链接，而不是位于所有4个div下方。

我已经在这里尝试了一些答案，例如

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

但是我确定将其放入代码中时会做错事

这是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" 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="service1">
  <h1>Service1</h1>
 </div>
 <div class="service-content" id="service2">
  <h1>Service2</h1>
 </div>
 <div class="service-content" id="service3">
  <h1>Service3</h1>
 </div>
 <div class="service-content" id="service4">
  <h1>Service4</h1>
 </div>


</div>

这里是打开第一个div服务内容div的功能

$('document').ready(function() {
$('#show1').click( function() {
var $div = $('#' + $(this).data('href'));
$('.service-content').not($div).hide();
$div.slideToggle();
});
});

该代码在所有4个服务div下方打开服务内容div。在移动屏幕上，我需要service1才能显示在service-box1下以及service-box2之上，依此类推。我不知道这是否意味着重新编写整个代码，或者是否有功能可以完成任何帮助。

Answer 1

我认为您可以使用CSS或flexbox的{{1}}轻松实现这一目标。我在https://jsfiddle.net/saksham_malhotra/tjom0Le1/上创建了一个使用grids的示例

这里的主要概念是将媒体查询用作

flexbox

只需尝试调整示例中的窗口大小并查看布局更改即可。

Answer 2

解决这个问题的一个好方法是看看其他人是如何做到的。引导程序3（和4）中使用的HERE IS逻辑。您可以查看引导程序库代码，也可以只使用它。

在移动屏幕上更改div顺序以扩展div

2 个答案: