Re-order blocks inside bootstrap columns using grid css - css

Question

I have two columns and each column contains two blocks
The current order in mobile is
1
2
3
4
And I want it to be :
3
1
2
4
I tried to use grid but I don't know how I can get block 3 out from column 2.
See:
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;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<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>
And another question can we did this ordering by using CSS supported by IE11? because display:grid is not supported by IE.

Answer 1

Change the layout a little and you will be able to achieve this using bootstrap classes (https://getbootstrap.com/docs/4.3/utilities/flex/#order) without the need 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>
With you current code, the only way is to use display:contents which is not well supported (https://caniuse.com/#feat=css-display-contents)
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>