Is it possible, using bootstrap 4 grid, to change the layout of my page for mobile in this specific way?

Question

I currently have the following bootstrap grid set-up like this

And this produces something similar to this effect

I've been now trying to edit the bootstrap layout so that on a extra small screen the grid collapses to this

but I have been unsuccessful. Solutions I have tried are mainly around using the Order class but I can only switch the order between the two columns and not the 3 blocks individually. I have also tried splitting up the second column into separate rows but then Order seemed to only work within the columns. Is something like this possible within bootstrap grid or would I have to use flex classes?

user_3132019 · Answer

See below. You need to see the page both in full and non-full size.

.row > div {
  display: grid;
}

.A {
  order: 2;
}

.B {
  order: 1;
}

.C {
  order: 3;
}

@media (min-width: 1024px) {
  .A {
    order: 1;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
  .B {
    order: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  
  .C {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}
}

user_2442099 · Answer

custon class and display:contents could help for a few browsers:

example

@media screen and (max-width:569px) {
  .d-sm-contents {
    display: contents
  }
  .order-top {
    order: -1;
  }
}

[class^="col"]>div {
  border: solid;
}

user_1255023 · Answer

You can try this tecnique:

.A{ background-color:blue; height:100%}
.B{ background-color:red; }
.C{ background-color:yellow; }

div.row [class^="col"] {
    display:inline-block;
    padding:0px;
}

Is it possible, using bootstrap 4 grid, to change the layout of my page for mobile in this specific way?

3 Answers