I am using the grid system and have 2 columns as set below:
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
</div>
What I want is for column 1 to be stacked over column 2 instead of column 1 being on top of column 2. Here is what I get: Result
And here is what I'm looking for: Wanted Result
CodePudding user response：
I make my solution , you can try it
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
</div>
.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.col-md-6 {
grid-column: 1;
grid-row: 1;
}
CodePudding user response：
You can achieve this, by simply setting the position of each column to absolute.
Additionally, you can also write a media query that matches the breakpoints system of bootstrap to enable this behavior only on smaller devices. I'm showing all the possible breakpoints below. You can move the code to the desired media query to enable and disable this behavior on the required screen sizes.
/* X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }*/
/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991.98px) {
.blue{
background-color: rgba(0, 0, 255, 0.5);
position: absolute;
}
.red {
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
}
}
/*
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
*/<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-6 red fs-2 text">
1
</div>
<div class="col-md-6 blue fs-2 text">
2
</div>
</div>CodePudding user response：
When you use absolute position for any section, it becomes like a floating boat. Which by default position is left = 0 and top = 0. So when it's active in more than medium devices, it's overlapping. So have to define, which section set which position by top, left, right and bottom.
/* X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }*/
/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991.98px) {
.blue{
background-color: rgba(0, 0, 255, 0.5);
position: absolute;
right: 0;
}
.red {
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
left: 0;
}
}
/*
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
*/<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-6 red fs-2 text">
1
</div>
<div class="col-md-6 blue fs-2 text">
2
</div>
</div>** You can skip md from col-md-6 for all devices working.
CodePudding user response：
Use order-*
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>