I want to display the image column as the second column on large screens and as the first column on small screens in Bootstrap version 5

Having an issue with my Bootstrap v5 setup. I have a simple two-column layout with an image and text.

I need the image to display in the second column on large screens and be the first column on medium and large screens.

<div class="container">
  <div class="row">
       <div class="col-lg-6 order-last">
      <img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg" >
    </div> 
    
    <div class="col-lg-6">
      <span>FIRST COL</span>
      <span>I want the image to be first on mobile screens. I've tried using the order-X classes of BS v5 but they're not working as expected. I read that order won't change based on CSS for small screens using the orderclass.</span>
    </div>

  </div>
</div>

Check out the code here

Can anyone help me figure out what I'm doing wrong? I've tried using a combination of order-last, order-first, and order-x without success. The order remains the same regardless of screen size.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f6e8f7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">


    <div class="col-lg-6">
      <img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg">
    </div>
    
    <div class="col-lg-6 order-md-first">
      <span>FIRST One</span>
      <span>I want image on first on mobile screen i am using order-X or order-last etc feature of BS v5 but it keeps the order same it doesnt change, i read somewhere order will not change based on css on small screen based on orderclass</span>
    </div>


  </div>
</div>

I have updated your code by adding order-md-first to the content div and removing order-last from the image div.

Now, when the screen is larger than the md breakpoint, the content will be displayed first. When the screen size is smaller than the md breakpoint, the image will be shown first.

Answer №2

It's really just order-lg-last on the image column. No need for order-first since it's already implied.

<div class="container">
    <div class="row">
        <div class="col-lg-6 order-lg-last">
            <img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg">
        </div>
        <div class="col-lg-6">
            <span>FIRST COL</span>
            <span>I want image to be first on mobile screen so I tried using BS v5 features like order-X or order-last, but it doesn't change the order as expected. I've read that the order won't change on small screens based on the orderclass in CSS.</span>
        </div>
    </div>
</div>

Codeply

Explore more on re-ordering columns in Bootstrap

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

Poorly structured Vue HTML code

Currently, I am embarking on my journey with Vue and have set up ESLint and Prettier to format the code according to my preferred style. However, it is not behaving as expected. Specifically, when attempting to display a variable in the template, the forma ...

htmlvue.jsvue-componentprettier

Modify the color of the sidebar text in bootstrap from text-light to text-dark upon clicking with jQuery

Looking for assistance in integrating jQuery code to remove the "text-light" class when the side menu is open or when the navbar-toggler button is clicked. $(document).ready(function() { $(".sidebarNavigation .navbar-collapse").hide().clone().appendTo ...

htmljquerycssbootstrap-4

``The text overlay feature on the image appears to be malfunctioning

I'm facing an issue with overlaying text on an image - the text is getting pushed underneath the image and not displaying as intended. I can't figure out what's causing this problem. Any assistance would be greatly appreciated. Below is the ...

htmlcsstextoverlay

Loading two scripts in sequence, the first utilizing the "src" attribute while the second is an inline script

The HTML code below shows two script elements being added to the body of a webpage. <html> <body> <script> const first = document.createElement("script"); first.setAttribute("src", "./remote.js"); first.async = false; const second = doc ...

javascripthtmlperformancebrowser

Exploring the World of Html

I'm struggling with an HTML problem related to a web programming class I'm taking. The assignment involves creating a video game using HTML and JavaScript, where an image moves randomly on the screen and the player must click on it as many times ...

javascripthtmlcss

"An error has occurred in the file system, make sure to handle it when

I am encountering an issue with submitting a form using jQuery's ajaxSubmit() function. The problem arises when the file selected in the form is renamed, deleted, or made inaccessible before submission, leading to potential discrepancies in whether th ...

jqueryhtmljspfile-uploadstruts2

Issue with uppercase letters within a text input field

Imagine having an <input> and a <textarea> along with some JavaScript code that sends the value of the <input> to the <textarea> with additional text. How can you achieve this task? The text-transform: capitalize property is set in ...

javascripthtmlcss

I am experiencing issues with the responsiveness of my web page across various viewpoints, despite incorporating Bootstrap CDN links within the <head> tag

While coding in my VS Code editor for responsive websites, I encountered an issue where the output webpage was not as responsive as I expected. Even though I included Bootstrap CDN links in the head tag, the responsiveness did not meet my expectations. Bel ...

htmlcssvisual-studiobootstrap-4web-development-server

Tips for adjusting image dimensions with url() method in css

I have successfully incorporated collapsible functionality on my page. I would like to display a down arrow image instead of the default '+' symbol on the right side of the collapsible section. To achieve this, I can use the following CSS code s ...

javascripthtmlcss

Struggling to keep text aligned to the left?

Check out the image at https://i.sstatic.net/Qu7hT.png in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the htt ...

htmlcsscss-position

Modal box fails to refresh content

Currently, I am in the process of learning how to modify my blog using a modal window. However, when I click on the edit button within the modal, an error message 'Failed to execute 'fetch' on 'Window': Invalid name' appears i ...

javascripthtmlcssreactjsbootstrap-modal

Validating the existence of a file through HTTPS in Javascript

After attempting to retrieve the file using this code, I've encountered an issue - it works with HTTP requests but not HTTPS requests (which is what I require). function checkUrl(url) { var request = new XMLHttpRequest(); try { request.ope ...

javascripthtml

Identifying bots with Python's Requests and BeautifulSoup in web scraping tasks

Attempting to scrape all the HTML elements from a page using requests & beautifulsoup. Utilizing ASIN (Amazon Standard Identification Number) to extract product details from a page. The code snippet is as shown below: from urllib.request import urlope ...

pythonhtmlweb-scrapingbeautifulsouppython-requests

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

I've been experimenting with modifying a tabs script in jQuery that I came across. It seems like my attempt to enhance it has made things more complex than necessary. While I know creating tabs with jQuery is simple, I wanted to create my own version ...

javascriptjqueryhtmlcss

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

javascriptandroidioscsscordova

What is the procedure for assigning an element's background-color to match its class name?

Is there a way to use jQuery to make the background color of a span element match its class? $(function() { $("span").css("background-color") }); span { display: inline-block; width: 5px; height: 5px; border: solid #0a0a0a 1px; } <script src= ...

javascriptjqueryhtmlcss

Angularjs search filter performance slows down significantly when handling large datasets

I am currently working on an AngularJS client application that displays data in a table using the dir-paginate directive from dirPagination.js. Here is the code snippet: <input type="text" ng-change="SomeTask()" ng-model="vm.searchKeyword" /> &l ...

javascripthtmlangularjsdirpagination

Watir /Cucumber Element not found: dd-field div.dd-arrow-box (CSS Selector)

Chief complaint: The element cannot be located using CSS Selector Custom Css path: html.ng-scope body.ng-scope div.snap-content div.content-container div.ng-scope div.content-box div div.cb-landing-module div.deposit-acct-box div.dropdown div.dd-field ...

cssselectorwatir

What is a method to display a list in javascript without using a rendering engine?

Seeking to avoid any render engine or framework except for express. Our goal is to display any list retrieved from a database query without relying on a render engine. What code can be used as a substitute for a render engine when working with data lists ...

htmlnode.jsexpress

Trouble with Click event not working in Electron and mouse cursor not changing when hovering over an HTML button?

I'm in the midst of a project that involves using the electron framework. Within my project, I have an HTML file, a CSS file, and a Javascript file. The issue at hand is that when I hover over a button, the expected hand pointer icon fails to appear d ...

javascripthtmlcsselectronaddeventlistener