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:
- How to place button in top Right corner using bootstrap?
- How to place text in an image at any desired position ?
- Image Replacement in Bootstrap using text-hide Class
- jQuery UI | Slider
- Introduction to Model View View Model (MVVM)
- Include Bootstrap in AngularJS using ng-bootstrap
- Convert an image into grayscale image using HTML/CSS
- How to detect a mobile device in jQuery?
- How to disable zoom on a mobile web page using CSS?
- Mobile Search Engine Optimization (SEO)
- Spring MVC with JSP View
- How to target desktop, tablet and mobile using Media Query ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.