Arrange blocks within bootstrap columns using grid css

I have a layout with two columns, each containing two blocks

Currently, the mobile order is:

1 2 3 4

But I want it to be:

3 1 2 4

I attempted to use CSS grid but I am unsure how to move block 3 out of column 2.

Here's the code snippet:


body {
  padding-top: 50px;
}
.block {
  padding: 40px;
  text-align: center;
}
.y{
  background:yellow;
}
.r{
  background:red;
}
.b{
  background:lightblue;
}
.g{
  background:lightgreen;
}

@media only screen and (max-width: 991px) {
  .container {
    display: grid;
    background-color: pink;
  }
}

1
2
3
4

Another question: Can we achieve this ordering using CSS compatible with IE11? Since 'display:grid' is not supported by IE.

cssbootstrap-4css-grid

Answer №1

To achieve the desired layout, consider utilizing bootstrap classes (https://getbootstrap.com/docs/4.3/utilities/flex/#order) instead of CSS grid:

body {
  padding-top: 50px;
}

.block {
  padding: 40px;
  text-align: center;
}

.y {background: yellow;}
.r {background: red;}
.b {background: lightblue;}
.g {background: lightgreen;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 order-1 order-md-0">
      <div class="block y"> 1</div>
    </div>
    <div class="col-md-4 order-0 order-md-1">
      <div class="block b"> 3</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="block r">2 </div>
    </div>
    <div class="col-md-4">
      <div class="block g">4 </div>
    </div>
  </div>
</div>

If you prefer not to use display:contents, which may have limited support (https://caniuse.com/#feat=css-display-contents), then modify the layout as follows:

body {
  padding-top: 50px;
}

.block {
  padding: 40px;
  text-align: center;
}

.y {
  background: yellow;
}

.r {
  background: red;
}

.b {
  background: lightblue;
}

.g {
  background: lightgreen;
}

@media only screen and (max-width: 991px) {
  .container {
    background-color: pink;
    display:flex;
    flex-direction:column;
    padding:0!important;
  }
  .container > .row,
  .container > .row > div{
    display:contents;
  }
  .b {
    order:-1;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="block y"> 1</div>
      <div class="block r">2 </div>
    </div>
    <div class="col-md-4">
      <div class="block b"> 3</div>
      <div class="block g">4 </div>
    </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

Serving static files in Django

Currently diving into Django and encountering a hurdle with static files. I've followed the setup in both the settings and HTML, but unfortunately, they are not loading on the website. Seeking assistance to resolve this issue! **settings.py:** STATIC ...

pythonhtmlcssdjangostatic

Tips for creating responsive content within an iframe

I have inserted a player from a website that streams a channel using an iframe. While I have managed to make the iframe responsive, the video player inside the iframe does not adapt to changes in viewport size. Despite trying various solutions found online ...

javascriptjqueryhtmlcssiframe

Arrange a div element within another div by utilizing the fixed positioning property, while also accounting for any potential "white space

Can someone help me figure this out: I currently have this much progress: http://jsbin.com/apikiw/3/edit#preview The issue I'm facing is that I am unable to insert it between the <p /> tags due to its dynamic nature... any solutions or suggest ...

javascriptjqueryhtmlcss

The method of utilizing React with Redux to display component properties

I am currently trying to include my common component in my main.js file Successfully implemented this However, when attempting to print my Redux data values in the common component, I created a method called handleClickForRedux to handle this task. Even af ...

javascripthtmlcssreactjsredux

Label text facing positioning difficulties

Hey there! I have a goal in mind: https://i.stack.imgur.com/bnso9.png This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode. label { color: #6d6e70; bottom: 0; } .img-row img { width: 10 ...

htmlcsstwitter-bootstrap

What methods can I use to prevent floated child divs from wrapping?

I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs f ...

htmlcsscss-floatz-index

Swap out the string variable when it is modified

To generate a string inside the "code" variable that combines the selected image values, the final code should appear similar to: "test1/A=1a/B=1b" or "test2/A=1b/B=1a", etc. If the user modifies icon "A," it should replace the value in the code instead of ...

javascriptjquerycsshtml

Using CSS background-image URL in .NET MVC tutorials

What is the correct way to route to an image in an MVC web application? MVC has default routes, meaning you can access the same page in multiple ways: 1. localhost 2. localhost/home/index However, you can also do it this way, changing the root directory. ...

cssasp.net-mvcurl

Getting the URL of a CSS background image in NodeJS and Express: A step-by-step guide

I've recently learned that using getComputedStyle in a Node environment is not possible due to it being a browser-specific behavior. Despite this, I am still interested in retrieving all background image URLs within Node and downloading them as shown ...

javascriptcssnode.jsexpress

Setting distinct fonts for input placeholder and value: A guide

Can different fonts be set for an input placeholder and value? I have a scenario where the input placeholder is in a right-to-left language while the value is in English. Is it achievable using CSS3? ...

htmlcssplaceholderhtml-input

Employing a lexicon of hexadecimal color code values to harmonize CSS styles

I have a unique requirement where I need to utilize a dictionary of HTML color codes and then apply those colors as styles. It's an interesting challenge! Here is an example of how my color dictionary looks like: const colorCodes = { red: ...

javascripthtmlcssreactjs

Adjust Text to Perfectly Fit Button

I am developing a quiz using bootstrap and javascript. One issue I encountered is that the text in the buttons can sometimes be longer than the button itself. This results in the text not fitting properly within the button, making it unreadable on mobile ...

javascripthtmlcsstwitter-bootstrap-3

Creating a unique Bootstrap background design

I have recently started using bootstrap and I am facing an issue. I want to change the background of a container when hovering over it, but I am having trouble getting it right. HTML <div class="container bg-black h-25 w-25 box"></div&g ...

cssbootstrap-5

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

javascriptjqueryhtmlcss

Is it feasible to create a doughnut chart with curved edges?

My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful. https://i.sstatic.net/Rq6Lx.jpg I want each segment to have fully rounded corners, which presents a unique challenge. ...

javascriptcsssvgchartshtml5-canvas

Having trouble getting the header div to span the entire screen

I'm currently working on a project where I have set the header div to 100% width and the main container to also be 100% width. However, I am facing an issue where the right and left sides of the header are not filling the entire space. I managed to fi ...

htmlcssheightwidth

Creating aesthetically pleasing class names using SASS and CSS modules

I'm in the midst of working on a Next.js project and experimenting with SCSS/SASS for my styling needs. I'm currently grappling with how to streamline the process of applying class names. Here's the issue at hand: Within one of my componen ...

csssassnext.jscss-selectorscss-modules

Having trouble with dragging a file from one box to another in HTML5. The functionality is not working

Encountering an issue where the image does not display in the left box after dropping it. Here is the sequence of events: Before dragging the image: https://i.sstatic.net/C6JSM.png After dragging the image, it fails to display: https://i.sstatic.net/7Du0 ...

javascriptcsshtml

Creating responsive images with Bootstrap 5

1 I am currently using Bootstrap 5 to develop a website and encountering an issue with getting images to move above text in the feature and mission sections on mobile or tablet screens. Previously, I was able to achieve this effect using the following cod ...

htmlcssresponsive-designfrontendbootstrap-5

Guide to embedding CSS into a DOC file generated from HTML with PHP

I've created a document, but it's not linking to the external CSS file. I have added .css files in my code, but when I generate the document, it doesn't apply the CSS classes. Here is my code: <?php header("Content-type: application/vn ...

phphtmlcssdoc