javascript - 设置在小型设备上可扩展的 div

Question

我尝试在悬停 div 时展开它，但仅当网站显示在小型或超小型设备上时。那可能吗 ？请参阅下面的图片，了解我尝试实现的目标:

到目前为止，在小型设备上显示页面时，我只能隐藏黄色的 div，但我不知道如何只缩小它并使其可扩展。

我应该根据这些规范创建一个新的 div 并只在小型设备上显示它而不是黄色的 div 吗？欢迎任何帮助和建议!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-sm-0 d-none d-lg-block no-float" style="background-color:yellow;">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has.</p>
    </div>
    <div class="col-lg-8 col-sm-10 no-float" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
	<div class="col-sm-2 no-float" style="background-color:blue;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Answer 1

用 jquery 试试这样的东西

$(document).ready(function(){
if ($(window).width() < 800) 
 $('.testblock').bind({
  mouseenter: function(e) {
   $(".testblock").addClass("col-sm-2");
   $(".testblock").removeClass("col-sm-1");
  },
  mouseleave: function(e) {
  $(".testblock").removeClass("col-sm-2");
   $(".testblock").addClass("col-sm-1");
  }
 });
});

fiddle :https://jsfiddle.net/wL7snqxe/