Arranging Bootstrap divs for optimal display on mobile devices

Check out my simple jsfiddle demonstration here.

I'm looking for a solution where the image appears above the text on smaller window sizes, instead of dropping below due to the HTML order.

Currently, I am considering having duplicate images (one above and one below) and then using CSS to hide/show as needed. Is there a more efficient way to achieve this without loading double the images?

<div class="container">    
    <div class="row">        
        <div class="col-sm-6 mobile-only">
            <img src="http://placehold.it/350x150" />
        </div>          
        <div class="col-sm-6">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
            </p>              
        </div> 
        <div class="col-sm-6">
            <img src="http://placehold.it/350x150" />
        </div>
    </div>       
</div>
htmlcsstwitter-bootstrap

Answer №1

To achieve the desired effect, you can utilize push/pull modifiers like this:

<div class="main-container">
    <div class="row">
        <div class="col-lg-6 col-lg-push-6">
            <img src="http://placehold.it/350x150" />
        </div>
        <div class="col-lg-6 col-lg-pull-6">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>  
        </div>
    </div>
</div>

For a visual representation and interactive demo with text on the left, image on the right, smaller screen image on top, and text below, you can view this fiddle example http://jsfiddle.net/db7umm1w/2/

Answer №2

To meet this specific requirement, the initial step involves crafting the mobile view using HTML and implementing the pull and push classes for other screen sizes.

Here is a suggested solution:

<div class="container">

           <div class="row">


               <div class="col-sm-push-6 col-sm-6   ">
                   <p>
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                   </p>

               </div>

               <div class="col-sm-pull-6 col-sm-6  mobile-only">
                   <img src="http://placehold.it/350x150" />
               </div>
           </div>
           <div class="row">

               <div class="col-sm-6">
                   <img src="http://placehold.it/350x150" />
               </div>

           </div>

       </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate a variety of HTML ordered lists

Can anyone assist me in determining the type of ordered list shown below? What is the method to achieve an ordered list like this: (a) (b) (c) in HTML? ...

htmlcss

Tips for positioning a sticky div underneath a stationary header

I'm currently utilizing Bootstrap 4 for my project, and I am encountering an issue with maintaining a div that has the class "sticky-top" just below a fixed navbar. Despite attempting to use JavaScript to replace the CSS while scrolling, it hasn' ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Trouble arises when attempting to establish an isolated scope within Angular alongside UI Bootstrap

My table of data is set up with AngularJS, and one of the columns is calculated using a function in the controller. On my webpage, I have a button that opens a modal. When I use UI Bootstrap to open the modal, it creates a new isolated scope (child of the ...

javascriptangularjstwitter-bootstrap

Enhance your website with Bootstrap 5's responsive rounded corners feature

Utilizing Bootstrap 5.3.1, I have successfully implemented responsive borders using the Utility API. My CSS file includes classes such as .rounded-top-sm-4 and .rounded-end-sm-4. # utilities_custom.scss @import "bootstrap/functions"; @import &quo ...

csstwitter-bootstrapbootstrap-5

Enhancing the alignment of div elements

Our objective is to have two divs aligned next to each other. Here is the HTML code: <div class="test1>Text 1</div> <div class="test2>Text 2</div> And here is the CSS code: .test1 { float: left; } .test2 { float: left; } ...

csshtmlalignment

Secure your DOM's href attribute from prying eyes

I have a display page that shows all of our reports in the following format: https://i.sstatic.net/lNzH8.png When hovering over a report, it displays the file's URL (where it is located on our server). I want to prevent users from accessing this inf ...

javascriptphpjqueryhtml

What is preventing me from utilizing the Jquery show() method within a Div's onclick event without incorporating data-toggle="dropdown"?

I am facing an issue with a div that should act like a button. When this div is clicked, another hidden div is supposed to be displayed. However, the behavior is not as expected. I have included the data data-toggle="dropdown" attribute in the div acting a ...

javascriptjqueryhtmlcss

What is the best way to show an on/off button in an HTML page when it loads, based on a value stored in a MySQL database?

Is there a way to display a toggle button onload based on a value from a MySQL database table? I need the button to switch between 0 and 1 when clicked. I've looked at several solutions but none of them seem to work for me. Any help would be greatly a ...

javascriptphphtmlmysqlajax

Toggle the visibility of an HTML element and dynamically change the text of a button

As a beginner in Javascript, I am experimenting with changing button text upon the show/hide of a fieldSet. However, I am encountering some issues with the button text not updating correctly. $(window).on("load", function() { $('.indoor').sl ...

javascriptjqueryhtml

Curved edges conceal excess content + alter (Works in Firefox & Safari, but not in Chrome or Opera)

Trying to create rounded corners for a div to mask its children's content led me to a solution I found in this question. However, it appears that the solution does not work when the children elements are transformed. The following http://jsfiddle.net ...

htmlrounded-cornerscss

CSS3 :target and display:none inconsistency problem in Internet Explorer and Firefox

Creating a one-page site with navigation tabs that toggle between hidden divs using :target CSS3 selector is my current project. To ensure the first div is visible upon page load, I implemented this line of code: document.location.href = "#div1"; The HTM ...

csstabstarget

"Classes can be successfully imported in a console environment, however, they encounter issues when

Running main.js in the console using node works perfectly fine for me. However, when I attempt to run it through a browser by implementing an HTML file, I do not see anything printed to the console. Interestingly, if I remove any mentions of Vector.ts fro ...

javascripthtmltypescript

Error in Javascript: Required variable missing for Sendgrid operation

I am facing an issue while attempting to send an email using sendgrid. Whenever I execute the function, it gives me an error saying "Can't find variable: require". Despite my efforts to search for a solution online, I have not been able to resolve thi ...

javascripthtmlnode.jssendmail

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...

htmlcss

Clicking the popup form causes it to blur out

Having trouble with a blurry pop-up form when clicking the button? Check out the code I've used below: <button class="btn btn-default" data-toggle="modal" data-target="#myModal">ENQUIRE NOW</button> ...

htmljquerycsspopup

Creating an art exhibit in an illuminated amp lightbox using Django

Currently, I am immersed in a project that involves Django on the back-end and amp on the front-end. However, I am facing some challenges in connecting both tags, particularly when it comes to implementing a lightbox feature. What I aim to achieve is a li ...

pythonhtmldjangopython-3.xamp-html

Tips for ensuring a scrollbar remains at the bottom position

I'm facing an issue with a scroll-bar inside a div element. Initially, the position of the scroll-bar is at the top. However, whenever I add text to the div element, the scroll-bar remains in its initial position and does not automatically move to the ...

javascriptjqueryhtmlcss

Instructions for showing a particular image on a different page upon clicking a button with JavaScript

I have created a fictional ecommerce website as a personal project. The home page features image links to various shoe products, each with its own product page containing an image, name, and placeholder description. When users click the "Buy Now" button on ...

javascripthtml

Slick Slider isn't compatible with Bootstrap Tab functionality

I'm having an issue with using slick slider within a Bootstrap tab menu. The first tab displays the slick slider correctly, but when I switch to the second tab, only one image is shown. How can I resolve this problem? <!DOCTYPE html> <html ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Incorporating .json files into an HTML template with the help of an HTML form designed for selecting a particular

I am faced with a collection of various .json files that I wish to specify by name on an HTML page (local) form, enabling me to load this data onto a table. This is how my HTML form appears: <form> File: <input type="text" Id="file_name"&g ...

javascriptphpjqueryhtmljson