What is the best way to arrange divs in varying order across different breakpoints?

Question

What is the best way to arrange divs in varying order across different breakpoints?

I am currently utilizing Bootstrap and aiming to achieve a specific layout as shown below:

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

The numbers are indicating the desired order of the divs in a single column on mobile devices. The HTML code I attempted is as follows:

<div class="col-xs-12">
<div class="flex-row">
    <div class="col-md-6">
        <div class="order-1">
            <!-- TITLE SUBTITLE -->
        </div>
        <div class="order-md-3">
            <!-- FILM META AND CONTENT -->
        </div>
    </div>

    <div class="col-md-6">
        <div class="order-md-2">
            <!-- FILM POSTER -->
        </div>
        <div class="order-md-4">
            <!-- UNDER POSTER. -->
        </div>
    </div>
</div>

Could someone please point out any mistakes or issues with my current setup?

html css bootstrap-4

Answer 1

Answer №1

Here are three different approaches you can take:

Replicate your HTML elements and toggle their visibility accordingly
Arrange items as flex columns and set a fixed height to wrap them
Utilize column-count

Approach 1: Replication of Elements

The simplest solution involves duplicating items #2 and #4 in the left column for mobile display. Hide the right column by adding the class d-none. On larger screens, hide the replicas with d-md-none but show the right column with d-md-block.

HTML

<div class="container">
    <div class="row">
        ...
    </div>
</div>

Demo

View Demo

Approach 2: Flex Column Setup for Wrapping

If items are not in the same row or column, using order won't work. Instead, set the container to display as d-md-flex and

flex-md-column</code on larger screens, ensuring wrapping with <code>flex-md-wrap

.

HTML

<div class="container d-md-flex flex-md-column flex-md-wrap">
    ...
</div>

CSS

@media (min-width: 768px) {
    .container {
        height: 40rem;
    }
    
    ...
}

DEMO

View Demo

Approach 3: Utilizing Column-Count

Employ CSS3 column-count for a clean layout solution where item order cannot be changed.

HTML

<div class="container">
    ...
</div>

CSS

.card {
    text-align: center;
    margin-bottom: 1rem;
}

.container {
    display: flex;
    flex-direction: column;
}

...

@media (min-width: 768px) {
    ...
}

DEMO

View Demo

Answer 2

Here are three different approaches you can take:

Replicate your HTML elements and toggle their visibility accordingly
Arrange items as flex columns and set a fixed height to wrap them
Utilize column-count

Approach 1: Replication of Elements

The simplest solution involves duplicating items #2 and #4 in the left column for mobile display. Hide the right column by adding the class d-none. On larger screens, hide the replicas with d-md-none but show the right column with d-md-block.

HTML

<div class="container">
    <div class="row">
        ...
    </div>
</div>

Demo

View Demo

Approach 2: Flex Column Setup for Wrapping

If items are not in the same row or column, using order won't work. Instead, set the container to display as d-md-flex and

flex-md-column</code on larger screens, ensuring wrapping with <code>flex-md-wrap

.

HTML

<div class="container d-md-flex flex-md-column flex-md-wrap">
    ...
</div>

CSS

@media (min-width: 768px) {
    .container {
        height: 40rem;
    }
    
    ...
}

DEMO

View Demo

Approach 3: Utilizing Column-Count

Employ CSS3 column-count for a clean layout solution where item order cannot be changed.

HTML

<div class="container">
    ...
</div>

CSS

.card {
    text-align: center;
    margin-bottom: 1rem;
}

.container {
    display: flex;
    flex-direction: column;
}

...

@media (min-width: 768px) {
    ...
}

DEMO

View Demo

Answer 3

Answer №2

The easiest solution (without any additional CSS or repeated markup) is to utilize "floats" within Bootstrap 4. By utilizing the d-md-block class to remove flexbox on larger screens, and then incorporating float-* for column positioning, you can achieve the desired layout. This approach allows the columns to maintain their natural order on mobile devices...

<div class="row d-md-block d-flex">
    <div class="col-md-6 float-left py-2">
        <div class="border">
            1
        </div>
    </div>
    <div class="col-md-6 float-right py-2">
        <div class="border taller">
            2 FILM POSTER
        </div>
    </div>
    <div class="col-md-6 float-left py-2">
        <div class="border taller">
            3 FILM META AND CONTENT
        </div>
    </div>
    <div class="col-md-6 float-left py-2">
        <div class="border">
            4
        </div>
    </div>
</div>

Answer 4

The easiest solution (without any additional CSS or repeated markup) is to utilize "floats" within Bootstrap 4. By utilizing the d-md-block class to remove flexbox on larger screens, and then incorporating float-* for column positioning, you can achieve the desired layout. This approach allows the columns to maintain their natural order on mobile devices...

<div class="row d-md-block d-flex">
    <div class="col-md-6 float-left py-2">
        <div class="border">
            1
        </div>
    </div>
    <div class="col-md-6 float-right py-2">
        <div class="border taller">
            2 FILM POSTER
        </div>
    </div>
    <div class="col-md-6 float-left py-2">
        <div class="border taller">
            3 FILM META AND CONTENT
        </div>
    </div>
    <div class="col-md-6 float-left py-2">
        <div class="border">
            4
        </div>
    </div>
</div>

Answer 5

Answer №3

To maintain the existing HTML structure, you have the option to utilize flex as the display property for the parent element and arrange the children accordingly by setting their order. By incorporating media queries to define specific breakpoints, adjusting the order can easily achieve the desired layout.

Answer 6

To maintain the existing HTML structure, you have the option to utilize flex as the display property for the parent element and arrange the children accordingly by setting their order. By incorporating media queries to define specific breakpoints, adjusting the order can easily achieve the desired layout.

What is the best way to arrange divs in varying order across different breakpoints?

Answer №1

Approach 1: Replication of Elements

HTML

Demo

Approach 2: Flex Column Setup for Wrapping

HTML

CSS

DEMO

Approach 3: Utilizing Column-Count

HTML

CSS

DEMO

Answer №2

Answer №3

Similar questions

JQuery unable to recognize dynamically inserted Anchor Tag through AJAX request

The SVG image exceeds the boundaries of the parent column div in bootstrap

How to set a default checked value in a custom DropDownList in AngularJS?

The bootstrap 4 dropdown button fails to activate the dropdown feature

Transfer information to a different division using Ajax

The @media print rule for Angular 16 in the style.css file is not functioning properly

Modify the appearance of the element that is currently chosen

The text does not automatically move to the next line

Struggling with how to customize the input component from react-native-elements? Let

Showcasing a div on top of a frame in html

Tips for fashionable dressing &

Tips on controlling the color of an input field in a form using React

Populate HTML Table with Array Elements

Master the art of positioning in three.js framework

The list in my "Hamburger" menu isn't loading properly

Sending jQuery variables to PHP

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

Animation that responds to scrolling movements

The form embedded within the <tr> element seems to be malfunctioning

Tips for getting the sidebar to move down on mobile devices