如何在引导程序的移动视图中将滑块上方的图像放置？

制作一个响应式页面，在该页面中，用户在桌面视图中将图像放置在范围滑块的右侧。但是在移动视图中，图像与滑块重叠。

使用网格列作为旨在解决此问题的Bootstrap。在桌面视图中，将范围列设置为向右拉，在移动视图中，将flex-column-reverse设置为在滑块上方设置图像。

添加行和列：

例子：

  

    
      place the image above the slider 
      in mobile view in bootstrap
  
    
  
    
  
    
  
    
    
    
    
    
    


    body {
        margin-top: 1rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }
      
    .input {
        margin-top: 3rem;
    }
      
    #rangeid {
        padding: 0.5rem;
    }

  

    
        
            
              GeeksforGeeks
          
  
            
  
                
                    
                        
                            
                        
                        
                            
                        
                        
                            
                        
                    
                
  
                
                    
                        
                    
                
            
        
    


    var ranger = document.getElementById('rangeid1');
    var image = document.getElementById('imgid');
    var width = image.width;
    var height = image.height;
  
    ranger.onchange = function() {
        image.width = width * (ranger.value / 100);
        image.height = height * (ranger.value / 100);
    }

输出：
桌面视图：

行动检视：