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

Question

我尝试在悬停时扩展div，但只有当网站显示在小型或x小型设备上时。那可能吗 ？请参阅下面我尝试实现的内容：

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

我是否应该创建一个具有这些规格的新div并仅在小型设备而不是黄色div上显示？任何帮助和建议欢迎！

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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");
  }
 });
});

小提琴：https://jsfiddle.net/wL7snqxe/