Is it possible to rearrange the order of rows and columns based on the viewport size?

Is it possible to achieve two different layouts with Bootstrap 5 based on the viewport size?

I want to avoid using display:none and JS/Jquery tricks if possible.

I attempted to accomplish this by utilizing Bootstrap 5 tools, but encountered issues on larger screens:

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

<div class="container-fluid">
  <div class="row">
    <div class="col-4 col-xxl-4 col-md-4 bg-primary">
      <div class="card">1</div>
    </div>
    <div class="col-4 col-xxl-4 col-md-8 order-md-2 order-xxl-3 bg-success">
      <div class="card">2</div>
    </div>
    <div class="col-xxl-8 col-md-12 order-md-3 order-xxl-2 bg-warning">
      <div class="card">3</div>
    </div>
  </div>
</div>

The layout doesn't behave as expected on large screens (works fine on small screens with the provided code) :

Appreciate any insights or assistance, thank you!

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

To create a dynamic layout, you can utilize a combination of two flexbox grids:

.scrollable {
  max-height: 36px;
  overflow-y: scroll;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77x7axax81818187898595f0e8f4e9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zebA2VHKQfydwxHbpBCcAsO56LmnOM89zW3RWsH91DCLwZHEoK2Hadq2F6RrG01" crossorigin="anonymous">

<div class="row g-0">
  <div class="row g-0 col-12 col-lg-4">
    <div class="col-6 col-lg-12 bg-primary">1</div>
    <div class="col-6 col-lg-12 bg-success scrollable">2<br />2</div>
  </div>
  <div class="row g-0 col-12 col-lg-8 no-gutters">
    <div class="col-12 bg-warning">3</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

What is the best way to progressively load sections of an HTML table?

I'm facing an issue with a table that is rebuilt asynchronously every time a new option is chosen from a dropdown. The HTML generation works fine, but sending it back across the wire breaks when the size is too large. One idea I had was to query sect ...

jqueryhtmlajaxtwitterhtml-table

Retrieving PNG image from dynamically created PDF file with DomPDF

Having trouble displaying an image on a generated PDF using DOMPDF. My DomPDF version is v2.0.3 and I'm working with XAMPP on localhost. This is the output: see image here Below is the code snippet: <?php require_once __DIR__ . '/vendor/auto ...

phphtmldompdf

User interface for creating a platform resembling Product Hunt or Reddit

I am currently developing a web application similar to Product Hunt. The back-end API is up and running smoothly, and I have successfully implemented AngularJS for the front-end. However, I lack experience in designing the look and feel of the site. Shou ...

cssangularjstwitter-bootstrap

What could be causing my Next.js layout to re-render?

I currently have a basic root layout set up in Nextjs (app router) that displays a navigation bar and the child components underneath it. ROOT LAYOUT import "./globals.css"; import type { Metadata } from "next"; import { Inter } from & ...

htmlcssreactjsnext.js

Troubleshooting Django: Issue with template extension causing static image not to be found in child template

For my personal project, I decided to learn Django. Initially, I created two separate apps, "API" and "Search". As development progressed, I merged the search functionality into the API app and updated the views accordingly. I also designed a base template ...

htmldjangodjango-templatesdjango-staticfiles

Having trouble loading NEXT JS images when the file path is stored in a variable?

I'm working with Next.js for my coding project and I have a array of images that I need to incorporate into my application. CODE1 <Image src={require("../assets/image1.png")} /> This code snippet works perfectly fine and displays the ...

cssreactjsnext.jsfrontendjsx

Optimizing website layout for mobile devices

I have a website with a fixed page layout at . It displays properly on desktop browsers but not on mobile devices. The website is adjusting to fit the browser size, but some components are changing format. Can anyone offer assistance? Thank you! ...

htmlcssfixed-widthpage-layout

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

javascriptjqueryhtmlcssjquery-ui

Using Selenium WebDriver to locate elements by their XPath within a WebElement

I am facing an issue with locating an element in my code using the following snippet: elements = driver.find_elements_by_xpath("//div[@class='Display']") After successfully finding the elements, I want to access the second "Display" element and ...

pythonhtmlfindselenium-webdriver

"Customize the dimensions and scroll behavior of a division

I've been struggling to make a single-page site full-width, and I can't seem to get it right. My goal is to create sections that are: Full width Background image full width The height of the div should be at least the same as the image, adjust ...

htmlcss

Is it possible to relocate an iframe outside the body of a post in Blogger?

For my blog posts, I have a goal of relocating the first iframe used outside of the post body and into a custom div called #myvideos. Some blog templates, such as this example, have already achieved this by moving a video out of the post body. I would like ...

jquerycssiframeblogger

The outline feature cannot be applied to buttons within a btn-group in Bootstrap 4

I have successfully removed the outline for a single button, but I am struggling to remove it for a button within a btn-group class. Check out my JSFiddle DEMO This is the HTML code I am working with: <button class="btn btn-primary">Button without ...

cssbootstrap-4

javascript Click to add a tag

I am currently using a rich text editor and I'm attempting to add a code tag feature to it. Currently, the editor has two buttons - one for underline and one for code. When I select text and click the underline button, the selected text will be under ...

javascriptjqueryhtml

What is causing the bootstrap nav-bar to not open on smaller screens?

This nav-bar functions properly on screens larger than 640px, but on smaller screens, the menu button does not display the menu items when clicked. You can view the site here. <nav class="navbar navbar-inverse"> <div class="container-fluid" ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3

What is the best way to make the child Div float to the bottom of the parent Div?

Screenshot I attempted various CSS techniques in an effort to make the .booknetic_appointment_container_footer float to the bottom of #booknetic_theme_5, but unfortunately, I was unsuccessful. The closest solution I found involved hardcoding padding, but ...

htmlcss

Strange CSS Problem: Button dysfunction in displays sized 13 inches or 15 inches

I have made a landing page using the latest version of bootstrap. However, I am encountering an odd issue where the success button is not clickable on certain devices such as 13-inch and 15-inch laptops and desktops. You can find the URL for the landing p ...

csstwitter-bootstrap-3screenscreen-resolution

What is the best way to make a CSS change triggered by a onScroll() event stay in place permanently?

I need a div element to be displayed as a "scroll back to top" button on my webpage when the user has scrolled past a certain point. To achieve this, I am using the JavaScript code provided below: $(document).ready(function() { $(window).scroll(functio ...

jquerycsseventsonscroll

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

csszurb-foundation

"Navigation Side Menu: w3-sidebar with hamburger toggle feature

If you are looking to implement the w3-sidebar, you can find it here: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over The existing code uses a "hanburger" icon to open the side menu and a "Close X" menu item to close it. To simpl ...

jqueryhtmlcss

Is there a way to create a header that fades out or disappears when scrolling down and reappears when scrolling up?

After spending some time researching and following tutorials, I have not made much progress with my goal. The task at hand is to hide the top header of my website when the user scrolls down and then make it reappear when they scroll back up to the top of t ...

javascriptcsshtml