Reordering Columns in Bootstrap 4.0 for Mobile View

This is the appearance of the layout in lg.

For mobile devices, specifically sm, I am aiming for the column order to be: 1, 3, 5, 2, 6, 4

Is this achievable, and if so, is it relatively straightforward using Bootstrap 4.0 or do I need to rewrite the code?

All my attempts with order-sm from 1 to 12 have been unsuccessful. No matter what I try, I can't seem to move column 4 to the end as the last column.

Reorganizing to ensure that column 4 is at the end on mobile devices is crucial, even if achieving everything else I mentioned is impossible.

 _______________________
|                 |     |
|     1           |  2  |
|_________________|     |
|           |     |_____|
|     3     |  4  |     |
|           |     |  5  |
|           |     |_____|
|           |_____|     |
|___________|     |  6  |
                  |     |
                  |_____|

<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        6
    </div>
</div>

EDIT: The current code almost achieves the desired structure but there is a gap between columns 1 and 3. Additionally, column 6 is positioned below column 3 instead of below column 5, which is where it should be located.

 _______________________
|                 |     |
|     1           |  2  |
|_________________|     |
 _________________|_____|
|           |     |     |
|     3     |  4  |  5  |
|           |     |_____|
|           |_____|
|___________|
|     |
|  6  |
|     |
|_____|

<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 d-flex flex-row flex-wrap'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-sm-1 order-md-1 order-lg-1'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-4 order-sm-4 order-md-4 order-lg-2'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-2 order-sm-2 order-md-2 order-lg-3'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-6 order-sm-6 order-md-6 order-lg-4'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-3 order-sm-3 order-md-3 order-lg-5'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-5 order-md-5 order-lg-6'>
        6
    </div>
</div>
htmlcsslayoutbootstrap-4

Answer №1

For optimal layout control, consider using the d-flex class within the root element to manage orders effectively. As you apply classes like 

'my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
, ensure they are structured as shown below:

HTML

<div class='my-5 px-3 d-flex flex-row flex-wrap'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-sm-1 order-1'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-2 order-sm-4'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-3 order-sm-2'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-4 order-sm-2'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-6'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-6 order-sm-5'>
        6
    </div>
</div>

Please note that the order specified in the code may vary from what you anticipate. You can modify the order-sm-* values to match your preferred order.

DEMO: https://codepen.io/rahul-pxl/pen/pqgmWo

Answer №2

After exploring various options, I decided to implement a solution to my problem by utilizing jQuery and the .appendTo() method. Instead of relying on unknown properties with flex and order, I opted for a more direct approach that checks the window width using $(window).width() upon every resize event $(window).resize().

I appreciate everyone's efforts in trying to help with this issue. Below is the code snippet of the solution that worked for me:

<script>
    $(window).resize(function()
    {
        if($(window).width() < 767)
        {
            $("#mobOrder-1").appendTo("#mobAnchor");
            $("#mobOrder-2").appendTo("#mobAnchor");
            $("#mobOrder-3").appendTo("#mobAnchor");
            $("#mobOrder-4").appendTo("#mobAnchor");
            $("#mobOrder-5").appendTo("#mobAnchor");
            $("#mobOrder-6").appendTo("#mobAnchor");
        }
        else
        {
            $("#mobOrder-1").appendTo("#mobAnchor");
            $("#mobOrder-4").appendTo("#mobAnchor");
            $("#mobOrder-2").appendTo("#mobAnchor");
            $("#mobOrder-6").appendTo("#mobAnchor");
            $("#mobOrder-3").appendTo("#mobAnchor");
            $("#mobOrder-5").appendTo("#mobAnchor");
        }
    });
</script>

<div id='mobAnchor' class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
    <div id='mobOrder-1' class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left'>
        1
    </div>
    <div id='mobOrder-4' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        2
    </div>
    <div id='mobOrder-2' class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left'>
        3
    </div>
    <div id='mobOrder-6' class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left'>
        4
    </div>
    <div id='mobOrder-3' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        5
    </div>
    <div id='mobOrder-5' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        6
    </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

Creating a dynamic animation for a navigation bar's underline

I'm attempting to add a smooth underline effect to the links in my navbar when they are hovered over. Unfortunately, the entire ul element is being underlined instead of just the selected link. Is there a way to resolve this issue? a { text-deco ...

htmlcss

There is a mismatch in the host name: please consider using a domain name (e.g., https://myname.myorg.com) instead of https://localhost

My current setup involves an HTML application that sends an AJAX request to a Qt C++ HTTP Server running on my local computer, hosted at "https://localhost:8081". However, I am facing an issue with a host name mismatch causing the AJAX request to fail. Is ...

htmlajaxqtsslhostname

Is it possible to maintain the sidebar while eliminating the scrolling JavaScript?

Looking to recreate the image display style on Facebook where pictures appear in a lightbox format. The challenge I'm facing is figuring out how they manage to have the sidebar with no visible scroll bar inside... If you want to see this for yourself ...

javascriptjqueryhtmlcss

The functionality of WebDriver Wait is not functioning as expected

Is there a way to avoid waiting for the entire page to load? I thought using WebDriverWait would help, but I keep getting a TimeoutException even though the tag is visible. self.driver.get('http://www.quoka.de/') self.wait.until(EC.invisibility_ ...

pythonhtmlseleniumselenium-webdriverwebdriver

I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

I'm facing a challenge in Material-UI where I need to set different font sizes for TextField. While it may be simple in HTML/CSS, it's proving to be tricky in Material-UI. Can anyone help me figure out how to achieve this? The code snippet below ...

javascriptcssreactjsmaterial-ui

Adjust the width of the table to scroll horizontally and size down to fit within the

My webpage is structured with a sidebar and content section, using flex display with the sidebar set to 0.15 flex and the content set to 0.85 flex. I want this page to be full width of the viewport. The issue arises when I try to incorporate a table into ...

javascripthtmlcssflexbox

Adjusting the position of just a single box in a flexible layout

I have multiple columns set up in a similar way. <div style="display: flex;flex-direction:column"> <main class="main-contents" role="main">TopHeader </main> <div> content A</div> <div> conte ...

htmlcssflexbox

CSS Image Placement

If I have an image with a width of 2000px, where the snazzy design aspect is located about 600px in and spans about 900px. My goal is to use this image as the background for a website, ensuring that the snazzy design remains centered even when stretching t ...

css

Launching numerous modals from vehicles in a carousel using Bootstrap

I'm currently facing an issue that I haven't found a solution for yet. I'm attempting to incorporate cards within a carousel and have the details of those cards open a modal. The first modal works fine, but the second one only shows the moda ...

bootstrap-4

Unlocking the full potential of Bootstrap with the colspan feature

I'm currently in the process of developing an Angular 2 and Bootstrap application. Here's a snippet of my code: <div class="panel-body"> <table class="table table-striped table-bordered" style="width:100%;"> < ...

csstwitter-bootstrapangular

Using Phonegap alongside ons-scroller and ons-button

Recently, I have been using Phonegap with the Onsen UI system on iOS devices. I encountered an issue where buttons included within an ons-scroller were not clickable when running on an iPad or iPhone. Here is the code snippet that caused the problem: < ...

javascriptioscsscordovaonsen-ui

What are the strategies employed by Wix in utilizing mobile and desktop CSS?

While browsing through Wix, I stumbled upon something quite intriguing that left me puzzled. On a desktop with a width of 2560px, the Wix page loaded normally. But what caught my attention was when I resized the screen to make it smaller, either by using ...

htmlcssvelo

Ways to incorporate footer at the bottom on Django

Is there a way to ensure the footer remains at the bottom in my Django template? I have added content using blocks in Jinja format. See the code snippet below: <div class="ui container"> {% block content %} {% endblock content % ...

htmldjangowebjinja2footer

What is the best way to ensure that this form field remains hidden when the page is loaded?

In my Django project, I have a form that should only display the entity name on page load. However, it is currently showing both the entity name and quote text fields. The quote text field should only be visible when the entity name is not in the database. ...

javascripthtmldjangodjango-rest-framework

The onclick handler fails to function following the injection of html using jquery AJAX

After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...

jqueryhtmlajax

The dataTable plugin is malfunctioning, displaying all records on a single page when it should only show 10 per page

I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...

javascriptphpjqueryhtmlcss

Applying CSS transitions to an element whose value is dynamically set using JavaScript

When I set a transition for an element in my style sheet, along with some template HTML code, the transition works fine if I delay setting the attribute in JavaScript. However, it doesn't work without the delay. I think this is because both processes ...

javascripthtmlcss

Send the user to the chosen option in the dropdown menu

My goal is to redirect the user based on the option they select. I am having an issue with my HTML code as it currently redirects to "example.com/page" instead of "example.com/page/1". Can someone please assist me in resolving this problem? <select clas ...

javascripthtmldropdown

AngularJs Pagination Feature: Display the Number of Items on Each Page

One challenge I am facing is how to display the number of items on each page. For instance, if I have 50 items for pagination with 10 items per page, I would like to indicate how many items are currently being displayed. For example, on the first page it ...

javascriptjqueryhtmlangularjs

What is causing my AJAX function to malfunction and throwing an exception for undefined data objects?

I am having trouble with my ajax query in my code. Even though it is returning the required data, it is not displaying properly within the HTML code. I have a common header and footer (PHP) for all other files. Despite my efforts to resolve this issue by s ...

javascripthtmljqueryajax