After realizing it was easier than expected, I simply consolidated all columns into one row and the responsiveness now works perfectly. Thank you to everyone who helped.
I am utilizing Bootstrap 4 grid system to structure 3 rows with columns.
For lg breakpoint:
1st row with 3 columns
2nd row with 4 columns
3rd row with 4 columns
For md breakpoint:
1st row with 3 columns
2nd row with 3 columns
3rd row with 3 columns
For sm breakpoint:
1st row with 2 columns
2nd row with 2 columns
3rd row with 2 columns
<div class="example-container">
<div class="example-row">
<div class="example-content-main top">Main content</div>
<div class="example-content-secondary top">Secondary content</div>
<div class="example-content-third top">Third Content</div>
</div>
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
<div class="example-content-third">Third content</div>
<div class="example-content-fourth">Fourth content</div>
</div>
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
<div class="example-content-third">Third content</div>
<div class="example-content-fourth">Fourth content</div>
</div>
</div>
UPDATE: My custom SCSS using Bootstrap 4 mixins for breakpoints:
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
xs: 0,
sm: 320px,
md: 510px,
lg: 780px,
xl: 1000px
);
.example-container {
@include make-container;
}
.example-row {
@include make-row;
}
//ROWS 1,2,3,4
.example-content-main {
background: gold;
@include make-col-ready;
@include media-breakpoint-up(md) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
@include media-breakpoint-up(xl) {
@include make-col(3);
}
&.top {
background: gold;
@include make-col-ready;
@include media-breakpoint-up(md) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
@include media-breakpoint-up(xl) {
@include make-col(3);
}
}
}
.example-content-secondary {
background: grey;
@include make-col-ready;
@include media-breakpoint-up(md) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
@include media-breakpoint-up(xl) {
@include make-col(3);
}
&.top {
background: white;
@include make-col-ready;
@include media-breakpoint-up(md) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
@include media-breakpoint-up(xl) {
@include make-col(3);
}
}
}
.example-content-third {
background: yellow;
@include make-col-ready;
@include media-breakpoint-up(md) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
@include media-breakpoint-up(xl) {
@include make-col(3);
}
&.top {
background: grey;
@include make-col-ready;
@include media-breakpoint-up(md) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
@include media-breakpoint-up(xl) {
@include make-col(6);
}
}
}
.example-content-fourth {...}
On lg screens, it displays correctly as shown in this image:
However, on md screens where I need 3 columns per row across 3 different rows, instead I get a layout like this:
Is there a way to keep the columns aligned even when on separate rows?