What is the method for rearranging the order of Bootstrap 5 columns within nested elements without using hidden duplicates?

This snippet of code is designed to show blocks in different ways on mobile and desktop devices.

<div class="col-12 col-sm-6 order-sm-1">TITLE</div>
<div class="col-12 col-sm-6 order-sm-0">IMAGE</div>
<div class="col-12 col-sm-6 order-sm-2 offset-sm-6">DESCRIPTION</div>

On a desktop view, the layout looks like this. Both IMAGE and TITLE blocks have the same height:

--------------- ---------------
-----IMAGE----- -----TITLE-----
--------------- ---------------
--------------- ---------------
--------------- --DESCRIPTION--
--------------- ---------------

However, I would like to display these blocks differently on desktop. The description block should be positioned below the title block, with both of them taking up the right half of the screen:

--------------- ---------------
--------------- -----TITLE-----
-----IMAGE----- ---------------
--------------- --DESCRIPTION--
--------------- ---------------

Is there a way to achieve this without using hidden classes to switch visibility in different views (due to SEO concerns)?

htmlcsstwitter-bootstrapresponsivebootstrap-5

Answer №1

Using the order property is limited to sibling elements.

When utilizing the order property, it determines the placement of a flexible item in relation to other flexible items within the same container.

It is possible to achieve a solution without JavaScript using Flex with all columns in the same container by leveraging flex-basis, but there are drawbacks...

... specifically requiring a set height:

Observe how they collapse below the small breakpoint using Dev Tools.

.row {
  height: 150px;
}

@media (min-width: 576px) {
  .col:nth-child(2) {
    flex: 0 100% !important;
    background: lightblue;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e7373686f686e7d6c5c29322f322c317d706c747d2d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 flex-column justify-content-sm-center">
    <div class="col order-sm-2">TITLE</div>
    <div class="col order-sm-1 d-flex justify-content-sm-center align-items-sm-center">IMAGE</div>
    <div class="col order-sm-3">DESCRIPTION</div>
  </div>
</div>

Working with heights might not be ideal in modern web development. Additionally, keep in mind:

Authors should avoid using order or the *-reverse values of flex-flow/flex-direction as a replacement for proper source ordering, as it can impact document accessibility.

Consider exploring the use of grid for designing your layout. This eliminates the need for explicit ordering:

/* Create two columns of equal size. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

/* Allow each grid item to span 2 columns by default... */
.grid-item {
  grid-column: span 2;
}

@media (min-width: 576px) {
  
  /* ...but only span 1 column above Bootstrap's SM breakpoint. */ 
  .grid-item {
    grid-column: span 1;
  }
  
  /* Set IMAGE to start on row 1 and span 2 rows. */
  .grid-item:nth-child(2) {
    grid-row: 1 / span 2;
  }
}


/* COLORS */
.grid-item:nth-child(1) {
  background: lightgreen;
}
.grid-item:nth-child(2) {
  background: lightyellow;
}
.grid-item:nth-child(3) {
  background: lightblue;
}
<div class="grid">
  <div class="grid-item">TITLE</div>
  <div class="grid-item">IMAGE</div>
  <div class="grid-item">DESCRIPTION</div>
</div>

It's also possible to integrate Grid into Bootstrap layouts.

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

conceal elements created with JQuery within an AJAX function

Is it possible to use jQuery and the $.ajax() method to submit a form, displaying only the result while hiding other elements on the page? I am looking to add a conditional in the Ajax method that will show the result if successful, hiding certain elements ...

phpjqueryhtmlcssajax

Having trouble with the preview feature when resizing images

Before trying to implement the JSFiddle was working correctly: http://jsfiddle.net/qa9m7t33/ However, after attempting to implement it, I encountered some issues: http://jsfiddle.net/z1k538sm/ While trying to resize an image, I realized that this example ...

javascriptjquerycss

Ways to clear away adhesive header and maintain its fixed position

I've been tinkering with my website, which you can find at this link: . I used the html5 up template for it, and the template came with a sticky header. However, when the site is viewed on a smaller screen, there's an ugly gap that forms between ...

javascriptcsshtmlscrollsticky

Shift content from side to side with a click

I've been attempting to shift content left and right using an onclick event and I need it to stop at the margins on the left or right. The list-items are generated dynamically. Here's the code I've tried so far, but it's not quite worki ...

javascriptjqueryhtmlonclick

The issue of overflowing scroll functionality appears to be malfunctioning

.main-content{ height: 100%; width: 60%; min-height: 800px; background-color: white; border-radius: 5px; margin-left: 1%; border: solid 1px black; } .profile-banner{ display: flex; flex-direction: row; justify-content: space-between; ...

css

Failure of Highchart's resizing mechanism when hidden

Check out this AngularJS demo app featuring Highcharts: http://jsfiddle.net/dennismadsen/dpw8b8vv/1/ <div ng-app="myapp"> <div ng-controller="myctrl"> <button ng-click="hideView()">1. Hide</button> <button ng ...

cssangularjshighcharts

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

phpjavascriptjqueryhtmlajax

Is it possible to export CSS stylesheets for shadow DOM using @vanilla-extract/css?

I have been exploring the use of @vanilla-extract/css for styling in my React app. The style method in this library exports a className from the *.css.ts file, but I need inline styling to achieve Shadow DOM encapsulation. During my research, I came acros ...

javascriptcssreactjsstitchesvanilla-extract

Issue with video not displaying in EJS template on node.js server

I have successfully uploaded a video using a node.js server and saved the FilePath to MongoDB in my /public/uploads folder. Within my ejs file, I am trying to display videos using the following code snippet: //Videos is an array of objects retrieved from ...

htmlnode.jsexpressejs

Strikethrough feature not specified on the website

Check out this unique website that showcases text with a strikethrough. Interestingly, I couldn't find any mention of it in the CSS or HTML code. Here is a snippet from the code: <div style="width:100%;height:259px;background-image: url('< ...

htmlcss

In Python 2.7, we can utilize scraping techniques along with the 're' library to extract float numbers from a given string. By using the '

I just scraped this content import re import urllib from BeautifulSoup import BeautifulSoup After scraping, I have results like this (printed numbers_in_mill.text): 9.27[7] 9.25[8] 10.17[9] 10.72[10] How can I modify these results to get: 9. ...

pythonoutputscreen-scrapinghtml

Guide to making a sliding animation appear when hovering over a menu using jQuery

I have noticed a common feature on many websites, but I am unsure of how to explain it. At times, there are sliding elements in the navigation, like an arrow under menu items that moves when the user hovers over different links. Here is an example of a s ...

javascriptjquerycssnavigationjquery-animate

In situations where there may be a duplicate, what alternative can I utilize in place of the id attribute?

I understand that almost any element in the DOM can have an "id" attribute, and I've used it to track each client in a table of clients. Although ids should not be repeated, my rows are assigned unique identifiers based on each person's "clientId ...

javascripthtml

Updating the favicon by replacing the image URL

I'm looking to customize the favicon on resource HTML pages. Specifically, when visiting the image URL, I want my own icon to display in the title bar instead of the server's icon (in this case XAMPP). ...

phphtmlfavicontitlebar

`Set the body height to equal that of the entire document`

Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...

cssheight

Having trouble retrieving values from multiple checkboxes in HTML

I have a HTML table displaying all the items from my SQL database. Each item has a checkbox that is supposed to pass the value of the item name to the calculation route when the submit button is pressed. However, the issue is that the submit button only ...

htmlnode.jsexpresscheckbox

How to target a class with a specific number in CSS selectors

My mobile hybrid application is built with Sencha Touch 2 and requires some customization based on the iOS version it's running on. In my Sass stylesheet, I originally had the following selector: .x-ios-7 { /* add iOS7 customizations here */ } How ...

csssass

What is the process for manually looping an HTML5 video on iOS 4.3/5?

I'm facing an issue with a video that has specific segments I need to be looped. The problem arises on iOS 5, where after updating videoElem.currentTime for the third time, mobile Safari stops recognizing this attribute correctly. Interestingly, on i ...

iosipadhtmlvideo

How can I create a tooltip or something similar for an HTML input field?

Seeking a solution for adding additional information to an HTML input field while typing or hovering over it. Attempted the following code snippet: <input type="text" onmouseover="window.status='hello world'; return true;" name="TextInput" ta ...

html

Styling the content area to fill the entire window in CSS will

<div id="content"> </div> #content{ height:100%; z-index:2; position:relative; top:40px } The content within this DIV is positioned 40px from the top of the page and will scroll under a navigation bar that is 40px high. I am trying to figur ...

css