Column overflowing from row in Bootstrap grid on smaller screens

Is there a way to rearrange the display order of my Hello-div-2 and Hello-div-3 on small screens? Currently, the sequence is

Hello-div-1, Hello-div-2, Hello-div-3, Hello-div-4.

It needs to be

Hello-div-1, Hello-div-3, Hello-div-2, Hello-div-4.

<div class="container">
    <div class="row">
        <div class="col-md-8 col-12 bg-primary">
            <h2 class="font-weight-light">Hello-div-1</h2>
        </div>
         <div class="col-md-4 col-12 bg-success">
            <h2 class="font-weight-light ">Hello-div-2</h2>
        </div>
    </div>
     <div class="row">
         <div class="col-md-8 col-12 bg-info">
            <h2 class="font-weight-light">Hello-div-3</h2>
        </div>
         <div class="col-md-4 col-12 bg-warning">
            <h2 class="font-weight-light">Hello-div-4</h2>
        </div>
    </div>
</div>

cssbootstrap-4grid

Answer №1

In case you find it impossible to alter the structure, one potential solution would be:

<div class="container">
    <div class="row">
        <div class="col-md-8 col-12 bg-primary">
            <h2 class="font-weight-light">Hello-div-1</h2>
        </div>
         <!-- hide this in small screen -->
         <div class="col-md-4 col-12 bg-success">
            <h2 class="font-weight-light ">Hello-div-2</h2>
        </div>
    </div>
     <div class="row">
         <div class="col-md-8 col-12 bg-info">
            <h2 class="font-weight-light">Hello-div-3</h2>
        </div>
        <!-- show this in small screen -->
         <div class="col-md-4 col-12 bg-success">
            <h2 class="font-weight-light ">Hello-div-2</h2>
        </div>
         <div class="col-md-4 col-12 bg-warning">
            <h2 class="font-weight-light">Hello-div-4</h2>
        </div>
    </div>
</div>

Answer №2

Combine all of them within a single .row and utilize the .order- classes...

<div class="container">
    <div class="row">
        <div class="col-md-8 col-12 bg-primary order-0 order-md-0">
            <h2 class="font-weight-light">Hello-div-1</h2>
        </div>
        <div class="col-md-4 col-12 bg-success order-2 order-md-0">
            <h2 class="font-weight-light ">Hello-div-2</h2>
        </div>
        <div class="col-md-8 col-12 bg-info order-1 order-md-0">
            <h2 class="font-weight-light">Hello-div-3</h2>
        </div>
        <div class="col-md-4 col-12 bg-warning order-3 order-md-0">
            <h2 class="font-weight-light">Hello-div-4</h2>
        </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

How come the hidden container does not reappear after I click on it?

I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, cli ...

javascriptjqueryhtmlcss

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

javascriptjquerycssjquery-collision

Three responsive images neatly arranged within separate div containers

Looking to have these 3 divs align horizontally with responsive images. Having trouble maintaining the layout when setting max-width. Any suggestions? .fl { display: flex; flex-wrap: no-wrap; height: 35%; flex-direction: row; } .pic { width: ...

htmlcss

Code for implementing vertical and horizontal scroll bars in a Kindo grid using Selenium WebDriver in the Eclipse IDE

Is there a way to click on a link within a Kindo grid that will redirect me to the appropriate page? I find that I need to scroll vertically to the right in order to locate the link item and click on it. The script I have tried using doesn't seem to w ...

jqueryeclipseselenium-webdrivergridscrollbar

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

cssangularinputicons

Display issues with React styled components preventing proper rendering on the screen

Having issues with my style components displaying in a web application I'm developing using React and Ruby on Rails. Everything was working fine until I added a third style component, now even after removing it, nothing shows up on the screen after ru ...

cssruby-on-railsreactjsweb-applicationsstyled-components

Which HTML element does each script correspond to?

Are there any methods to identify the script used in certain HTML elements? For instance, if I wish to determine the script responsible for creating a drop-down menu, I can locate the HTML and CSS for the menu but not the JavaScript (or other scripts). I ...

javascriptjqueryhtmlcss

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

javascripthtmlcsspolymerpolymer-3.x

Tips for eliminating the default arrow on the HTML select tag?

I am currently utilizing vuejs along with tailwindcss and I am trying to figure out how to get rid of the default arrow from an HTML select element. Despite my attempts to remove it by using CSS properties like -moz-appearance, -webkit-appearance, -ms-appe ...

htmlcssvue.jsdrop-down-menutailwind-css

my goal is to transform this text into the background

For my latest project, I want the entire page that I've coded to be integrated into the <body> section with endless scrolling ability. Additionally, I need the loop that I created to remain fixed when scrolling so that I can easily place my con ...

htmlcssbackground

What is the best approach to customize classes in material-ui with makeStyles and useStyles?

Imagine a scenario where there is a component responsible for rendering a button with a red background and yellow text color. A Parent component utilizes this child component but specifies that it wants the background color to be green while keeping the te ...

cssreactjsmaterial-uioverriding

Height of Bootstrap 4 footer aligned to the bottom

I've made a template that sets the height of the footer to 120px and specifies the line-height as well. Here is an example: .footer { height: 120px !important; line-height: 120px !important; } <!doctype html> <html lang="en"> &l ...

htmlcsstwitter-bootstrapbootstrap-4

Switching from a click event to a hover event in JavaScript

I've been experimenting with animating a burger bar on hover and came across an example online that I managed to adapt for mouseenter functionality. However, I'm struggling to make it revert back to the burger bar shape once the mouse leaves on m ...

javascriptjqueryhtmlcss

Proper method for verifying line-clamp in a Vue component

I came across a question that aligns perfectly with my current task - determining if text is truncated or not. The query can be found here: How can I check whether line-clamp is enabled?. It seems like my approach may not be accurate, so any guidance on ho ...

javascriptcssvue.js

show numerical values as images in sql

Currently, I'm in the process of developing a website for a neighbor who is considering opening a new restaurant. One of the features I need to work on is a page dedicated to testimonials and reviews from customers. My goal is to use SQL to store the ...

phpcsssqldatabase

CSS stylized horizontal navigation bar completed

* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav { clear:both; padding: auto; position:inherit; background-color:#F0D5AA; wid ...

htmlcss

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

javascripthtmlcssslideshow

Improper Placement of Bootstrap 5 Modal

I seem to be facing an unexpected issue where the Bootstrap 5 Modal and other components are displaying inside the sidebar menu instead of the main content area. Has anyone encountered this problem before? How can it be resolved? Here is a test example: ...

htmlcssbootstrap-5

Transition smoothly between two images with CSS or jQuery

I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fa ...

javascriptjqueryhtmlcssimage

Overlaying images on top of text

Is there a way to overlay an image on text, like a pattern image? Similar to applying color with a hex value in CSS: color: #ffffff; Any ideas on how this can be achieved? I want to have a pattern over text. https://i.sstatic.net/JaNZU.jpg Appreciate ...

javascripthtmlcss