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
- Introduction to Model View View Model (MVVM)
- Include Bootstrap in AngularJS using ng-bootstrap
- Convert an image into grayscale image using HTML/CSS
- Mobile Search Engine Optimization (SEO)
- How to disable zoom on a mobile web page using CSS?
- How to detect a mobile device in jQuery?
- Spring MVC with JSP View
- How to target desktop, tablet and mobile using Media Query ?
- Introduction to Xamarin | A Software for Mobile App Development and App Creation
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.