展开的 DIV 不会在桌面分辨率中下推其他部分 div 内容

Question

嗨，

我们正在尝试开发具有以下要求的响应式 div - * 在桌面模式下 - 扩展右侧 div，应该将所有左侧 div 推到另一个下方

我们可以根据需求实现Tablet模式的表示，但是如何在桌面模式下实现左div在展开右div时浮动呢？

提前致谢。

Answer 1

您需要 jquery 来执行此操作，只需在单击按钮时添加操作并将框 2-5 中的类从 col-lg-6 更改为 col-lg-12 和父类框 1-5 从 col-lg-8到 col-lg-4 然后将右框从 col-lg-4 扩展到 col-lg-8 即

$('.button-expand').click(function(){
   $('.box-small').toggleClass('col-lg-6');
   $('.box-small').toggleClass('col-lg-12');
   $('.parent-box').toggleClass('col-lg-8');
   $('.parent-box').toggleClass('col-lg-4');
   $('.box-right').toggleClass('col-lg-8');
   $('.box-right').toggleClass('col-lg-4');
});