div를 소형 장치에서 확장 가능하도록 설정

Question

웹 사이트가 소형 또는 x 소형 장치에 표시 될 때만 해당 항목을 가리 키면서 확장하려고합니다. 그게 가능하니? 내가 달성하기 위해 무엇을하려고의 아래 그림을 참조하십시오

을 난 단지 작은 장치에서 페이지를 표시하는 노란색 사업부를 숨길 수 있었다 지금까지,하지만 난 단지 줄이는 방법에 대해 아무 생각이 없다 그것을 확장 할 수있게하십시오.

해당 사양으로 새 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> 
 
\t <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"); 
    } 
}); 
}); 

바이올린 : https://jsfiddle.net/wL7snqxe/