Trying to reorder mobile content inside a plugin

I'm using the Ghost Taydio Image Changer on my site and am looking for help customizing it on mobile. I'd like to reorder the content so the image appears above the excerpt. I thought I had figured it out but it messed up the desktop.

https://seal-olive-9n5b.squarespace.com/ The password is 2601. 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.taydio-images-wrapper {
    order: 1 !important;
}
.taydio-plugin.summary-block-wrapper .summary-item-list-container {
    order: 2 !important;
    margin-top: 20px;
}
}

On 4/25/2023 at 8:11 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.taydio-images-wrapper {
    order: 1 !important;
}
.taydio-plugin.summary-block-wrapper .summary-item-list-container {
    order: 2 !important;
    margin-top: 20px;
}
}

 

Thanks for your help! Is it possible to change it so the order instead would be:

Upcoming events
Event names
Image
Excerpt
 

On 4/29/2023 at 3:29 AM, angmae said:

Thanks for your help! Is it possible to change it so the order instead would be:

Upcoming events
Event names
Image
Excerpt
 

Event Name in this case is "June 26-29"?

2 hours ago, tuanphan said:

Event Name in this case is "June 26-29"?

Event Name are the tabs, "VBS, Movie Night, Harvest Meal"

June 26-29 is part of the excerpt 

Use this new code

@media screen and (max-width:767px) {
.taydio-images-wrapper {
    order: 1 !important;
}
.taydio-plugin.summary-block-wrapper .summary-item-list-container {
    order: 2 !important;
    margin-top: 20px;
    display: flex !important;
    flex-direction: column !important;
}
    .tabs-list {
    order: 2 !important;
}

h3.ghost-summary-headinng {
    order: 1 !important;
}

.summary-item {
    order: 3 !important;
}

.taydio-plugin.summary-block-wrapper .summary-item-list {
    order: 3 !important;
}
}