CSS Generation Issue with Tablet version

I have created the header and footer using frontend editor. The desktop version looks good. The table and mobile version also look good in the editor, but on the front end, the table version is not working and this is because of the desktop version is using CSS breakpoint – min-width:768px after the CSS of the tablet version.

I have investigated further and found that on the CSS (generated for that layout) have an issue. It loads table version before and then overrides the CSS elements with the desktop version. As you can see in below code. The Line from 143 to 162 should be before line number 116. Not sure how can fix this. I have updated the CSS manually but when I change few sections it again generates the CSS with the same issue. Please help me to fix this. Here is the code.

.elementor-4 .elementor-element.elementor-element-414cd1f.elementor-column .elementor-column-wrap {
    align-items: center;
}

.elementor-4 .elementor-element.elementor-element-414cd1f > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
    margin-bottom: 0px;
}

.elementor-4 .elementor-element.elementor-element-ee9f1ea.elementor-column .elementor-column-wrap {
    align-items: center;
}

.elementor-4 .elementor-element.elementor-element-ee9f1ea > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
    margin-bottom: 0px;
}

.elementor-4 .elementor-element.elementor-element-d536f80 {
    text-align: left;
}

.elementor-4 .elementor-element.elementor-element-d536f80 .elementor-image img {
    width: 400px;
}

.elementor-4 .elementor-element.elementor-element-fde6cd2.elementor-column .elementor-column-wrap {
    align-items: center;
}

.elementor-4 .elementor-element.elementor-element-0633ae3 .elementor-text-editor {
    text-align: left;
}

.elementor-4 .elementor-element.elementor-element-0633ae3 {
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.elementor-4 .elementor-element.elementor-element-b1273ee.elementor-column .elementor-column-wrap {
    align-items: center;
}

.elementor-4 .elementor-element.elementor-element-b1273ee > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
    margin-bottom: 5px;
}

.elementor-4 .elementor-element.elementor-element-e4e4262 .elementor-text-editor {
    text-align: left;
}

.elementor-4 .elementor-element.elementor-element-e4e4262 {
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.elementor-4 .elementor-element.elementor-element-8a6bfc6.elementor-column .elementor-column-wrap {
    align-items: center;
}

.elementor-4 .elementor-element.elementor-element-8a6bfc6 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
    margin-bottom: 5px;
}

.elementor-4 .elementor-element.elementor-element-a472722 .elementor-text-editor {
    text-align: left;
}

.elementor-4 .elementor-element.elementor-element-a472722 {
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.elementor-4 .elementor-element.elementor-element-50f8fab.elementor-column .elementor-column-wrap {
    align-items: center;
}

.elementor-4 .elementor-element.elementor-element-0e21c4d .elementor-text-editor {
    text-align: left;
}

.elementor-4 .elementor-element.elementor-element-0e21c4d {
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.elementor-4 .elementor-element.elementor-element-d84fe72.elementor-column .elementor-column-wrap {
    align-items: center;
}

.elementor-4 .elementor-element.elementor-element-a182dfe .elementor-text-editor {
    text-align: center;
}

.elementor-4 .elementor-element.elementor-element-a182dfe {
    font-family: "Poppins", Sans-serif;
    font-size: 10px;
    text-transform: uppercase;
}

.elementor-4 .elementor-element.elementor-element-a182dfe > .elementor-widget-container {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.elementor-4 .elementor-element.elementor-element-3e11310.elementor-column .elementor-column-wrap {
    align-items: center;
}

.elementor-4 .elementor-element.elementor-element-2d2a985 > .elementor-widget-container {
    border-radius: 1px 0px 1px 0px;
}

@media(max-width:1024px) and (min-width:768px) {
    .elementor-4 .elementor-element.elementor-element-ee9f1ea {
        width: 50%;
    }
    .elementor-4 .elementor-element.elementor-element-fde6cd2 {
        width: 15%;
    }
    .elementor-4 .elementor-element.elementor-element-b1273ee {
        width: 15%;
    }
    .elementor-4 .elementor-element.elementor-element-8a6bfc6 {
        width: 15%;
    }
    .elementor-4 .elementor-element.elementor-element-50f8fab {
        width: 98%;
    }
    .elementor-4 .elementor-element.elementor-element-d84fe72 {
        width: 2%;
    }
}

@media(max-width:1024px) {
    .elementor-4 .elementor-element.elementor-element-0e21c4d .elementor-text-editor {
        text-align: center;
    }
}

@media(min-width:768px) {
    .elementor-4 .elementor-element.elementor-element-ee9f1ea {
        width: 39.042%;
    }
    .elementor-4 .elementor-element.elementor-element-fde6cd2 {
        width: 10.319%;
    }
    .elementor-4 .elementor-element.elementor-element-b1273ee {
        width: 9.756%;
    }
    .elementor-4 .elementor-element.elementor-element-8a6bfc6 {
        width: 10.063%;
    }
    .elementor-4 .elementor-element.elementor-element-50f8fab {
        width: 24.85%;
    }
    .elementor-4 .elementor-element.elementor-element-d84fe72 {
        width: 5.962%;
    }
}

@media(max-width:767px) {
    .elementor-4 .elementor-element.elementor-element-fde6cd2 {
        width: 33%;
    }
    .elementor-4 .elementor-element.elementor-element-b1273ee {
        width: 33%;
    }
    .elementor-4 .elementor-element.elementor-element-8a6bfc6 {
        width: 33%;
    }
    .elementor-4 .elementor-element.elementor-element-50f8fab {
        width: 70%;
    }
}

Is there something I can do until the further version release that fix this issue?