Troubleshooting the Div Ordering Problem in Bootstrap 4

Question

Troubleshooting the Div Ordering Problem in Bootstrap 4

Currently, I am using Bootstrap 4 and facing an issue with the layout order. Despite searching for a solution extensively, I have not been able to get it right or find one in the archives. Here is what I need...

For desktop view, the layout should appear as follows:

https://i.sstatic.net/191jv.png

While on a mobile device, the layout needs to be like this:

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

Box 1 has a class of "col-md-8", and Box 2 has a class of "col-md-4". However, I am struggling to determine how to properly position Box 3 (or which class to use) to display correctly in both layouts. Any suggestions would be greatly appreciated!

Thank you in advance for any assistance!

UPDATE (2018/6/26): Below is the modified code that resolves the issue:

<main id="body" role="maincontent">
    <div class="container">
        <h1>Page Title</h1>
        <div class="row d-flex d-md-block clearfix">
            <div class="col-md-8 main_content float-left">
                <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div class="col-md-4 highlight float-right">
                <p>Second Item</p>
            </div>
            <div class="col-md-4 float-left">
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div>
</main>

css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

This query has already been addressed in related inquiries like: How can I have one taller div alongside two shorter divs on Desktop and stacked on Mobile using Bootstrap 4?

Given that BS4 utilizes flexbox, the solution involves deactivating flexbox with d-md-block, and incorporating float- to position the second column to the right on md screens...

<div class="container">
    <div class="row d-flex d-md-block">
        <div class="col-md-8 float-left">
            Content for first column
        </div>
        <div class="col-md-4 float-right">
            Content for second column
        </div>
	<div class="col-md-8">
	    Content for third column
	</div>
    </div>
</div>

Additional details and examples can be found here

Answer 2

This query has already been addressed in related inquiries like: How can I have one taller div alongside two shorter divs on Desktop and stacked on Mobile using Bootstrap 4?

Given that BS4 utilizes flexbox, the solution involves deactivating flexbox with d-md-block, and incorporating float- to position the second column to the right on md screens...

<div class="container">
    <div class="row d-flex d-md-block">
        <div class="col-md-8 float-left">
            Content for first column
        </div>
        <div class="col-md-4 float-right">
            Content for second column
        </div>
	<div class="col-md-8">
	    Content for third column
	</div>
    </div>
</div>

Additional details and examples can be found here

Answer 3

Answer №2

When optimizing for mobile devices, consider utilizing media queries and grid classes specifically designed for smaller screens. For example, you can use the "col-sm-4" class within a div element to create a responsive layout. If you need some guidance on how to do this, check out this helpful guide.

`something {
padding: 5px;
@include media-breakpoint-up(sm) { 
    padding: 20px;
}
@include media-breakpoint-up(md) { 
    padding: 40px;
}

To control the order of elements on your webpage, utilize the "ordering" property. You can learn more about this feature by visiting this MDN reference link.

If you have any questions about implementing media breakpoints in Bootstrap 4-alpha, feel free to visit this useful post on Stack Overflow.

We hope that these resources will assist you in your website development journey.

Answer 4

When optimizing for mobile devices, consider utilizing media queries and grid classes specifically designed for smaller screens. For example, you can use the "col-sm-4" class within a div element to create a responsive layout. If you need some guidance on how to do this, check out this helpful guide.

`something {
padding: 5px;
@include media-breakpoint-up(sm) { 
    padding: 20px;
}
@include media-breakpoint-up(md) { 
    padding: 40px;
}

To control the order of elements on your webpage, utilize the "ordering" property. You can learn more about this feature by visiting this MDN reference link.

If you have any questions about implementing media breakpoints in Bootstrap 4-alpha, feel free to visit this useful post on Stack Overflow.

We hope that these resources will assist you in your website development journey.

Answer 5

Answer №3

Imagine the phone screen width as 425px according to Google Chrome settings. To see the final outcome, please copy and paste the following code into your browser:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            h1 {
                color: #fff;
            }
            .left, .right {
                height: 800px;
            }
            .one {
                height: 500px;
                background-color: red;
            }
            .two {
                height: 100%;
                background-color: green;
            }
            .three {
                margin-top: 0.5em;
                height: 275px;
                background-color: blue;
            }
            @media screen and (max-width: 425px) {
                .two {
                    width: 50%;
                    position: absolute;
                    left: 25%;
                    top: -285px;
                }
                .three {
                    margin-top: 51em;
                }
            }
        </style>
    </head>
    <body>
            
        <div class="row p-0 m-0">
            <div class="left col-md-8 col-sm-12 p-2">
                <div class="row p-0 m-0">
                    <div class="one col-12"><h1>One</h1></div>
                    <div class="three col-12"><h1>Three</h1></div>
                </div>
            </div>
            <div class="right col-md-4 col-sm-12 p-2">
                <div class="two"><h1>Two</h1></div>
            </div>
        </div>
           
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js"></script>
        <script>

        </script>
    </body>
</html>

Answer 6

Imagine the phone screen width as 425px according to Google Chrome settings. To see the final outcome, please copy and paste the following code into your browser:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            h1 {
                color: #fff;
            }
            .left, .right {
                height: 800px;
            }
            .one {
                height: 500px;
                background-color: red;
            }
            .two {
                height: 100%;
                background-color: green;
            }
            .three {
                margin-top: 0.5em;
                height: 275px;
                background-color: blue;
            }
            @media screen and (max-width: 425px) {
                .two {
                    width: 50%;
                    position: absolute;
                    left: 25%;
                    top: -285px;
                }
                .three {
                    margin-top: 51em;
                }
            }
        </style>
    </head>
    <body>
            
        <div class="row p-0 m-0">
            <div class="left col-md-8 col-sm-12 p-2">
                <div class="row p-0 m-0">
                    <div class="one col-12"><h1>One</h1></div>
                    <div class="three col-12"><h1>Three</h1></div>
                </div>
            </div>
            <div class="right col-md-4 col-sm-12 p-2">
                <div class="two"><h1>Two</h1></div>
            </div>
        </div>
           
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js"></script>
        <script>

        </script>
    </body>
</html>

Troubleshooting the Div Ordering Problem in Bootstrap 4

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the Bootstrap navbar to not toggle when the button is clicked?

The Next.js Image component does not implement the maxWidth attribute

Why does jQuery's each function struggle to retrieve the width of hidden elements?

Place an element in a higher position than a slideshow

"Although disabled, input elements can still be focused on in Firefox browser

Utilize Bootstrap 4 to seamlessly switch between nav-pills for larger screens and navbar-nav for smaller screens

Choosing "grandoffspring"

One-click process succeeds where two clicks fail

Tips for Showing Empty Data in a Nonexistent `<td>` Element within a Table

Fetching dynamic information via AJAX for a jQuery tooltip

What are the steps to add a background image in Chrome?

Increase value by 1 with the push of a button within two specified ranges using JavaScript

The input field cannot accommodate the lengthy value in the Mat Select option

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

What is the best way to manipulate the size and orientation of an image upon hovering over

How to Left Align Div Centered Within Another Div?

CSS Only flyout navigation - reveal/hide with a tap or click

Arrange the <form:radiobuttons> in a vertical position

How can you modify the color of a card in React by mapping through an array and evaluating its value?

Apply a CSS class to the selected radio button when retrieving row data from the table