Current CSS grid system

@tabathaj22
Unfortunately, It is not possible to display the pages and elements using the old grid system in the latest Responsive theme.

We recommend designing the page templates using Elementor to showcase the pages and elements like the old grid system.

Thank you.

Hello. I should have made my question clearer.

We have been using the new grid system but they lack responsiveness.

Here’s one example that we used using the new themes classes…

<div class="row">

<div class="col-md-4">Third</div>
<div class="col-md-4">Third</div>
<div class="col-md-4">Third</div>

</div>

They sit side by side on large devices, however they don’t stack on top of each other for medium devices because the responsive media queries for these new classes are the same for every break point.

The CSS style for .col-md-4 is:

.col-md-4
{padding-left: 15px;
padding-right: 15px;
width: 33.3333333333%;
}

However, you have the responsive media query break point the same for all the break points:

@media (min-width: 768px) {
  .col-md-4 {
    padding-left: 15px;
    padding-right: 15px;
    width: 33.3333333333%;
  }

@tabathaj22

To sit the div side by side on large devices, and to stack on top of each other for medium devices and small devices, please use classes like

<div class=”row”>

<div class=”col-xs-12 col-lg-4″>Third</div>
<div class=”col-xs-12 col-lg-4″>Third</div>
<div class=”col-xs-12 col-lg-4″>Third</div>

</div>

here, xs is for when min-width is 0px
here lg is for when min width is 992px

similarly, we have classes for

sm is for when min width is 576px
md is for when min width is 768px
xl is for when min width is 1200px
xxl is for when min width is 2400px

and number 1-12 defines the width taken by class
12 = 100% and 6 = 50%

basically (12 / n) * 100%

Thank you.