How to place the image above the slider in mobile view in bootstrap?

Making a responsive page in which the user has an image placed at the right of the range slider in desktop view. But in the mobile view, the image is overlapping with slider.

Use grid columns as Bootstrap intended to solve this issue. Set the range column to pull-right for desktop view and flex-column-reverse to set the image above the slider in mobile view.

Add a row and column:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="row flex-column-reverse flex-md-row">
          
        <div class="col-xs-12 col-sm-6 pull-right">
            <div class="input">
                <div class="slidecontainer">
                    <input type="range" 
                           min="0" max="100" 
                           value="100" id="rangeid1">
                </div>
            </div>
        </div>
  
        <div class="col-xs-12 col-sm-6">
            <div class="output">
                <img src="Image.png" 
                     class="img-fluid float-right"
                     id="imgid"  
                     width="275" height="95" >
            </div>
        </div>
    </div>
</div>

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      place the image above the slider 
      in mobile view in bootstrap
  </title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
  
    <link rel="stylesheet" 
          type="text/css"
          href="draft.css">
  
    <script src=
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
    </script>
    <script src=
            integrity=
 "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
    </script>
    <script src=
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
    </script>
</head>
<style>
    body {
        margin-top: 1rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }
      
    .input {
        margin-top: 3rem;
    }
      
    #rangeid {
        padding: 0.5rem;
    }
</style>
  
<body>
    <center>
        <div class="container">
            <h1 style="color:green" class="Hclass">
              GeeksforGeeks
          </h1>
  
            <div class="row flex-column-reverse flex-md-row">
  
                <div class="col-xs-12 col-sm-6 pull-right">
                    <div class="input">
                        <div class="slidecontainer">
                            <input type="range" 
                                   min="0" max="100"
                                   value="100" 
                                   id="rangeid1">
                        </div>
                        <div class="slidecontainer">
                            <input type="range" 
                                   min="0" max="100" 
                                   value="0" 
                                   id="rangeid">
                        </div>
                        <div class="slidecontainer">
                            <input type="range" min="0" max="100" 
                                   value="0" 
                                     
                                   id="rangeid">
                        </div>
                    </div>
                </div>
  
                <div class="col-xs-12 col-sm-6">
                    <div class="output">
                        <img src=
                             class="img-fluid float-right"
                             id="imgid" 
                             width="275" 
                             height="95">
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
<script>
    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);
    }
</script>
</html>

chevron_right


Output:
Desktop view:

Mobile view:



My Personal Notes arrow_drop_up

I am computer engineer and work as content creator for various sites as freelancer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.