Reorganizing the order of Bootstrap columns in a single row for mobile devices

I am struggling with changing the order of Bootstrap columns on smaller devices. I need them to remain in a single row on all screen sizes, but I want them to display in a different order on phones. Specifically, I want the layout to look like this on desktop and tablet:

Logo Menu Button

However, on phones, I would like the first two columns to be swapped:

Menu Logo Button

Is there a simple way to achieve this without the columns stacking?

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474071a071a03">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-xs-4 col-xs-order-2">
        Logo
        </div>
        <div class="col-lg-6 col-xs-4 col-xs-order-1">
        Menu
        </div>
        <div class="col-xs-4 hidden-lg col-xs-order-3">
        Button
        </div>
    </div>
</div>

Update: screenshot of current result https://i.sstatic.net/g4AEw.png

htmlcssbootstrap-4

Answer №1

An issue arose with Bootstrap-4 when the order-xs class was removed, as it became the default class. To make changes specifically for xs-classes, the order of all elements needs to be modified using the order-sm- class to correct the order at sm width:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d1e031e031a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-xs-4 order-2 sm-order-1">
        Logo
        </div>
        <div class="col-lg-6 col-xs-4 order-1 sm-order-2">
        Menu
        </div>
        <div class="col-xs-4 hidden-lg order-3 sm-order-3">
        Button
        </div>
    </div>
</div>

Answer №2

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-4">
        Main Navigation
        </div>
       <div class="col-lg-4 col-md-4 col-xs-4 order-sm-first">
        Company Logo
        </div>
        <div class="col-lg-4 col-md-4 col-xs-4 hidden-lg">
        Action Button
        </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

Is it possible to have a hidden div box within a WordPress post that is only visible to the author of the

How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...

javascripthtmlcsswordpressprivacy

How to retrieve an element by its class using JavaScript and Jquery while implementing a

I am working on creating a quiz example using Jquery, but I am facing some challenges when trying to manipulate CSS classes with hover in Jquery. .right{ background-color: white; } .wrong { background-color: white; } .right:hover { background-color ...

javascriptjquerycsshtml

The challenge of styling React components

Starting a new project with React and Redux has presented me with the challenge of deciding on a styling method. As a newcomer to React, I want to choose a method that won't compromise performance, will offer all CSS3 features, and is easy to maintain ...

cssinline-stylescss-modulesradium

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

As I work on my website, I aim to display images in a compact space, such as within a 300x300 <div>. What I envision is the ability for users to preview or enlarge these images upon clicking, allowing for a closer and more detailed view. For exampl ...

javascriptphphtmlcsslaravel

Enhance the functionality of jqGrid by customizing key bindings for arrow and tab keys

In order to enhance my jqGrid functionality, I am seeking to implement the ability for users to press different keys for specific actions. For example, pressing Enter should save data (which is currently working fine), while pressing the left arrow key sho ...

javascriptjqueryhtmljqgridfree-jqgrid

Retrieving a tag from bs4.element.tag results in an empty value

As I follow a tutorial to extract answers from a Quora URL, my code is set up like this url = 'https://www.quora.com/Should-I-move-to-London' r = requests.get(url) soup = BeautifulSoup(r.content, 'html.parser') answers = soup.find(" ...

pythonhtmljsonbeautifulsoup

What is the best way to place content in a single div without it being divided into several separate boxes

Here is my code snippet: <div class="col-md-9"> <div id="statbox"> {% for obj in product_type %} {% for obj1 in vastu %} <script type="text/javascript"&g ...

javascripthtmlcssdjango

What is the best way to incorporate keyboard shortcuts into carousel operations using jQuery?

The example can be found here. I want to be able to navigate through the images using the left and right arrows on my keyboard. How can I achieve this using jQuery or CSS? This is the structure of the HTML: <div id="slider-code"> <a cla ...

javascriptjquerycsskeyboard

Steps for updating a text box with new values and verifying the count using selenium web driver

Currently dealing with a problem where I need to track if the number of values in a text box field has surpassed 5. If it hasn't, I'm able to input more values, but if it has reached 5, then no more values can be entered. An image of the screen a ...

seleniumselenium-webdrivertextboxbootstrap-4

Sass can be used to create custom color classes for Bootstrap 5.3 that offer

I am currently using a Bootstrap 5.3 theme and I would like to give users the option to change the main color theme from the default blue to something like purple or orange. My idea is to create additional CSS files named "orange-as-primary.css", "purple- ...

csssassbootstrap-5color-scheme

Tips for organizing the contents of nested items in alignment

Here's a layout I've created, you can view it on CodePen. .parent { display: flex; justify-content: space-between; } .left { flex-grow: 1; flex-basis: 0; background-color: blue; } .right { background-color: red; flex-grow ...

htmlcss

The iPhone 6 Plus's Safari browser, when in landscape mode, displays multiple tabs open at once. Additionally, when a Bootstrap modal

Encountering an issue with the bootstrap modal on iPhone Safari 6+ in landscape mode. This glitch only happens when using multiple tabs on the browser. Follow these steps to replicate the problem: 1) Visit http://getbootstrap.com/javascript/ on your iP ...

csstwitter-bootstrapmobile-safariiphone-6-plus

Implementing a function as the `data-*` attribute for an element in Angular 6

I have a question about my component.ts file: import { Component, OnInit, AfterViewInit, ElementRef, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; import { environment } from '../../../enviro ...

javascriptangularhtmlangular6

How can I center a <a> vertically within a list that has varying heights?

Help Needed: Alignment Issue with Anchor Tags in List I am facing a challenge with vertically aligning the anchor tags inside my list. The number of list items varies based on the pages of my website, so I have used display flex on the list and flex: 1 on ...

htmlcsshtml-lists

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

javascriptjqueryhtmlcss

Preventing scrollbar-induced content shifting in Material-UI components: A guide

My browser app displays content dynamically, which can vary in length compared to the screen size. This causes a vertical scrollbar to appear and disappear on desktop browsers, leading to the content shifting left and right. To prevent this, I apply style ...

htmlcssmaterial-ui

Utilize Java to launch the HTML file in a web browser

I have a specialized need for my HTML files to be displayed on a platform that is browser-free. The solution that immediately comes to mind for me in this scenario is utilizing applet. Therefore, I am interested in having my HTML file (including CSS and JS ...

javahtmlcssswingapplet

The term "landscape" to address the issue of adjusting the Android app screen to display in landscape orientation is not being acknowledged

I am working on an Android app using HTML5 and Cordova. I've included the following code in the manifest.json file as a reference. However, I'm facing an issue where the app screen does not stay fixed horizontally. It only turns sideways when th ...

androidhtmlcordova

Use vertical gaps to separate items by applying the following technique:

One of my components is designed to act as a badge. The CSS for this component includes: https://i.sstatic.net/F0QZ6.png HTML: <div class="label label-as-badge"> {{ value.Termo }} <i class="fa fa-times"></i ...

htmlcssangularflexboxfont-awesome

How do I create a clean HTML file when using the email editor with TinyMCE?

I was able to develop my own email editor, inspired by this particular example. To enhance user experience, I included a download button at the end of the file so that users can easily retrieve their edited content. The issue I'm facing is that tinym ...

javascripthtmljquerytinymce