Tips for arranging elements in a customized manner using Bootstrap

Is it possible to reorder columns between desktop and mobile in Bootstrap 5 like the example shown in this image?

https://i.sstatic.net/I74PF.jpg

I have explored using the order classes and experimented with position: absolute, but I haven't been able to achieve the desired result.

I came across someone attempting a similar task with an older version of Bootstrap and without a satisfactory solution (I prefer not to use float). Also, please note that the green plus red parts may have a greater height than the blue part.

Below is the simple code snippet without any column reordering:

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

<div class="row">
  <div class="col-12 col-xxl-6">
    <div style="height:20px; background-color:green;"></div>
  </div>
  <div class="col-12 col-xxl-6">
    <div style="height:60px; background-color:blue;"></div>
  </div>
  <div class="col-12 col-xxl-6">
    <div style="height:40px; background-color:red;"></div>
  </div>
</div>

csstwitter-bootstrapbootstrap-5

Answer №2

To achieve this effect, you can replicate the green section using various .d-* display utility classes. The initial appearance should be hidden above a specific breakpoint with .d-xxl-none, while the second appearance must be concealed below that breakpoint with .d-none and visible above it with .d-xxl-block:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d120d10">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-12 col-xxl-6 d-xxl-none">
    <div style="height:20px; background-color:green;"></div>
  </div>
  <div class="col-12 col-xxl-6">
    <div style="height:60px; background-color:blue;"></div>
  </div>
  <div class="col-12 col-xxl-6">
    <div class="d-none d-xxl-block" style="height:20px; background-color:green;"></div>
    <div style="height:40px; background-color:red; "></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

Enhance Pagination Elements in WooCommerce by Adding Class Names

When trying to utilize Boostrap 4 classes with WooCommerce pagination, I encountered difficulty in adding custom class names. Upon inspecting the pagination.php file, I found the following code: $total = isset( $total ) ? $total : wc_get_loop_prop( &ap ...

phpwordpresstwitter-bootstrapwoocommercebootstrap-4

execute numerous Jssor Caption instances simultaneously

I have a Jssor slider and I want to create an animation for the first slide. My goal is to make two images come from the sides and merge in the center. I tried using a div for each image with a caption, and it works well. However, the second image starts ...

javascriptjquerycssjssor

Implementing CSS injection on a Next.js page during server-side rendering - tips and tricks!

I recently started working with next js. In my _app.tsx page, I have the following code: import '../styles/antd.css' import '../styles/globals.css' import type { AppProps } from 'next/app' function MyApp({ Component, pagePr ...

cssnext.jsserver-side-rendering

Styling a fixed sidebar in Vue.js

I am currently working on a layout design that includes a fixed sidebar on the left side, positioned beside a container with its own grid structure. Utilizing Vue.js means each template contains <div> elements where I attempt to incorporate additiona ...

htmlcssvue.jsgridsidebar

Different hover effects for Material-UI [v0.x] RaisedButton

Is there a way to customize the hover styling of a Material-UI RaisedButton? It seems that the design guidelines dictate what happens on hover, but is there a method to modify the button's color and background-color specifically for when it is being h ...

cssreactjsmaterial-ui

One particular Django template is failing to load the CSS, while the rest of the templates are

In my folder, I have two Django templates. One template is for the URL localhost:8000/people and it correctly fetches CSS from /m/css/style.css. The problem arises with the second template meant for the URL localhost:8000/people/some-name. This template f ...

cssdjango-templates

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

My goal is to toggle between two CSS classes on a selector click using Jquery UI .toggleClass(), but unfortunately, it's not producing the desired toggle effect. $(".toggle").click(function () { $(".archivePosts .columns").removeClass( "l ...

javascriptjqueryhtmlcssjquery-ui

Adjusting the size of a bug while hovering over a specific div

Having recently started learning HTML & CSS, I have a question regarding creating a box that scales from 1.0 to 0.8 when hovered over with the mouse. The scaling works perfectly when hovering in the middle (0.0 to 0.8) of the box. However, when hover ...

htmlcsshover

What could be causing the paragraph margins to overlap and not display properly?

Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. https://i.sst ...

htmlcss

Create a stylish navigation dropdown with MaterializeCSS

Incorporating the materializecss dropdown menu feature, I encountered an issue where only two out of four dropdown menu items were visible. Here is the HTML code snippet in question: <nav class="white blue-text"> <div class="navbar-wrapper con ...

javascripthtmlcssmaterialize

Making AngularJS work with angular-ui bootstrap and ensuring compatibility with IE8

Having trouble getting AngularJS code that utilizes angular-ui bootstrap to function properly in IE 8? Following the guidelines in the AngularJS developer guide on IE didn't seem to solve the issue for me. I inserted the code snippet below into my ind ...

javascriptangularjstwitter-bootstrap

What is the best way to populate a div with multiple other div elements?

My current project involves creating a sketchpad using jQuery for an Odin Project assignment. However, I have encountered an issue with filling the canvas (wrapper div) with pixels (pixel divs). The canvas does not populate correctly. Here is the link to m ...

javascriptjqueryhtmlcss

Transforming content dynamically

I am currently working on a single-page website that features a comprehensive product catalog. Here are the key elements I'm focusing on: A one-page website layout, complete with header, content, and footer (developed using HTML5/CSS3) Dynamic cont ...

jqueryajaxhtmlpluginscss

Is it possible to implement custom classes in @apply within a SCSS file in a Tailwind Next.js project?

Having trouble implementing a custom class overflow:inherit as @apply overflow-inherit in my next.js project with tailwind. It seems to be causing an error. Strangely, I can successfully use pre-built tailwind classes like @apply flex flex-col md:h-full h- ...

csssassnext.jstailwind-css

What is the best way to conceal Bootstrap accordion content when first loading my single-page application?

I am currently developing a single page application for an ESP32 device. I have chosen to keep all the content in one document as there is not a lot of information to display. My approach started with using the collapse class from Bootstrap 4.1.2. While i ...

htmlcssbootstrap-4

Integrating dynamic transition effects using Jquery Mobile for <div> elements

Just a friendly reminder, I must admit that my knowledge of Javascript is quite limited. I received a script from Padilicious to implement swipe navigation on my Jquery Mobile Site. It involves adding functions to a div tag like this: <div data-ro ...

javascripthtmlcssanimationjquery-mobile

The table is too wide for its parent mat-nav-list, stretching to 100%

Here is the code snippet I am using to display a table inside a mat-nav-list: <mat-nav-list> <table> <tr>Node Information</tr> <tr> <td>Name</td> <td *ngIf="activeNod ...

htmlcssangularangular-material

Adjust the source of the HTML5 video tag based on the orientation of an iPad

I am currently coding an HTML5 page specifically for iPad Mobile Safari, which includes a video tag for embedding video files. I have successfully implemented CSS3 media queries to determine the orientation of the iPad. My next challenge is to dynamically ...

ipadhtmlvideocssmobile-safari

What's the best way to place the text or operator from a button into an input field?

Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the ...

javascripthtmlcss

What is the best way to position my content next to my sticky sidebar for optimal visibility?

Just starting out with coding and tackling my initial project using reactJs and bootstrap 5. My aim is to create a sticky side navbar that remains fixed on the side while my content displays next to it, even when navigating through different routes. Unfort ...

javascriptcssreactjsreact-bootstrapbootstrap-5