What is the best way to rearrange div class layouts for mobile devices?

Question

What is the best way to rearrange div class layouts for mobile devices?

I'm looking to rearrange the layout for mobile. I'd like to have the title first, followed by the image, then the paragraph, and finally the button.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3 class="pt-5">Title</h3>          
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </p>
            <a href="#" class="btn btn-warning">submit</a>
        </div>
        <div class="col-md-6 col-xs-12 align-self-center">
            <img src="img/duo.png" alt="image" />
        </div>
    </div>
</div>

Take a look at the image link below for a visual representation:

https://i.sstatic.net/9cX5c.png

css html twitter-bootstrap bootstrap-4

Answer 1

Answer №1

If you're working with Bootstrap 4, you have the option to utilize the order class to rearrange your div elements.

For example:

<div class="order-sm-2 order-1"></div>
<div class="order-sm-1 order-2"></div>

You can achieve the same effect using CSS as well, as long as you are making use of the FLEX properties.

    .your_class{
         order: 2;
     }

    .your_class1{
        order: 1;
     }

Answer 2

If you're working with Bootstrap 4, you have the option to utilize the order class to rearrange your div elements.

For example:

<div class="order-sm-2 order-1"></div>
<div class="order-sm-1 order-2"></div>

You can achieve the same effect using CSS as well, as long as you are making use of the FLEX properties.

    .your_class{
         order: 2;
     }

    .your_class1{
        order: 1;
     }

Answer 3

Answer №2

When it comes to bootstrap, I may not be an expert, but I do have a couple of creative ideas for non-bootstrap solutions in this scenario. One option is to include the image below the title, hide it on desktop screens, and then display it using display: block for mobile screens using media queries.

Another approach involves utilizing jQuery with the insertAfter() function. By detecting the mobile screen size, you can dynamically place the image as needed. Here's an example:

var mobileSize = 768;

if ($(window).width() <= mobileSize) {
    $('.duo').insertAfter('.pt-5'); 
}

Feel free to experiment with this solution using the following link: http://jsfiddle.net/3buty5oL/1/

Answer 4

When it comes to bootstrap, I may not be an expert, but I do have a couple of creative ideas for non-bootstrap solutions in this scenario. One option is to include the image below the title, hide it on desktop screens, and then display it using display: block for mobile screens using media queries.

Another approach involves utilizing jQuery with the insertAfter() function. By detecting the mobile screen size, you can dynamically place the image as needed. Here's an example:

var mobileSize = 768;

if ($(window).width() <= mobileSize) {
    $('.duo').insertAfter('.pt-5'); 
}

Feel free to experiment with this solution using the following link: http://jsfiddle.net/3buty5oL/1/

Answer 5

Answer №3

$(document).ready(function(){
if($(window).width() < 767){//checking the device width
$(".image img").insertAfter(".pt-5");//relocating the image after the title
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3 class="pt-5">Title</h3>          
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </p>
            <a href="#" class="btn btn-warning">submit</a>
        </div>
        <div class="col-md-6 col-xs-12 align-self-center image">
            <img src="https://picsum.photos/200/300" alt="image" />
        </div>
    </div>
</div>

this can be achieved with jQuery in two easy steps: 1. determine the device width. 2. if it's a mobile device, then move the image beside the title.

Answer 6

$(document).ready(function(){
if($(window).width() < 767){//checking the device width
$(".image img").insertAfter(".pt-5");//relocating the image after the title
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3 class="pt-5">Title</h3>          
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </p>
            <a href="#" class="btn btn-warning">submit</a>
        </div>
        <div class="col-md-6 col-xs-12 align-self-center image">
            <img src="https://picsum.photos/200/300" alt="image" />
        </div>
    </div>
</div>

this can be achieved with jQuery in two easy steps: 1. determine the device width. 2. if it's a mobile device, then move the image beside the title.

Answer 7

Answer №4

Typically, utilizing bootstrap4 order classes allows you to rearrange elements on the screen. However, given the structure where on Desktop there are 2 columns and on Mobile there is a single column with the Image positioned between the Title and Paragraph, using order classes alone may not easily achieve the desired layout.

A potential solution to achieve the desired layout is to have the Image duplicated in two locations and then display one based on the screen width.

HTML

<div class="container">
     <div class="row">
         <div class="text-center col-md-6 text-md-left">
             <h4>Title</h4>
             <img class="img-fluid d-md-none" src="..." />
             <p>
                 Paragraph. Lorem ipsum dolor sit amet, consectetur 
                 adipiscing elit
             </p>
             <a href="#" class="btn btn-sm btn-warning">More</a>           
         </div>
         <div class="col-md-6">
             <img class="img-fluid d-none d-md-block" src="... />
         </div>
     </div>
</div>

On mobile, the image on the right column is hidden due to the d-none class:

https://i.sstatic.net/Uy2UV.png

On desktop, the image on the right column is displayed because of the d-md-block class, but the image between the Title and Paragraph is hidden due to d-md-none:

https://i.sstatic.net/mUP08.png

fiddle: http://jsfiddle.net/aq9Laaew/235510/

Answer 8

Typically, utilizing bootstrap4 order classes allows you to rearrange elements on the screen. However, given the structure where on Desktop there are 2 columns and on Mobile there is a single column with the Image positioned between the Title and Paragraph, using order classes alone may not easily achieve the desired layout.

A potential solution to achieve the desired layout is to have the Image duplicated in two locations and then display one based on the screen width.

HTML

<div class="container">
     <div class="row">
         <div class="text-center col-md-6 text-md-left">
             <h4>Title</h4>
             <img class="img-fluid d-md-none" src="..." />
             <p>
                 Paragraph. Lorem ipsum dolor sit amet, consectetur 
                 adipiscing elit
             </p>
             <a href="#" class="btn btn-sm btn-warning">More</a>           
         </div>
         <div class="col-md-6">
             <img class="img-fluid d-none d-md-block" src="... />
         </div>
     </div>
</div>

On mobile, the image on the right column is hidden due to the d-none class:

https://i.sstatic.net/Uy2UV.png

On desktop, the image on the right column is displayed because of the d-md-block class, but the image between the Title and Paragraph is hidden due to d-md-none:

https://i.sstatic.net/mUP08.png

fiddle: http://jsfiddle.net/aq9Laaew/235510/

What is the best way to rearrange div class layouts for mobile devices?

Answer №1

Answer №2

Answer №3

Answer №4

HTML

Similar questions

The hiding/showing of elements is not being executed correctly by jQuery

Issues creating bar graphs using HTML

What are the best ways to position elements within a div?

:Incorporating active hyperlinks through javascript

Incorporate a click function onto the image within the canvas

Vue.js component still not transitioning out despite using mode="out-in"

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

Adjusting or cropping strokes in a JavaScript canvas

Which internet browsing engine does Android leverage for phonegap applications?

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

Ensure that dynamically generated fields are verified whenever one of them is modified

What is the process for inheriting HTML templates?

Vuetify Card Overflow: Handling Multiline Text with Ellipsis

What is the best way to incorporate Ekko Lightbox into an Angular 7 Project?

Troubleshooting Bootstrap: Navigation bar toggling causes JS functions to malfunction

IE does not support Overflow and Ellipsis in this table

Center-aligned video text overlay that adapts to different screen sizes for a responsive design

How can I resize and horizontally align an image using html/css?

Could you please explain the mysterious space that appeared between padding-bottom and border-bottom?

How can you retrieve the value of a CSS file in Javascript and CSS?