Stacking Text Below Image on Tablet Like Mobile

Site URL: https://www.bloomingaylesmarin.com/

I'm trying to get the text block ("Bloomingayles") to the right of the top image on the page to stack on a tablet below the flower image (on left) using a media query, but I'm not able to make it work the way it does on mobile. Can anyone help please? Thank you!

This is the way it's currently displaying on tablet size screen....

BUT I want it to display like this on the tablet screen:

Add to Design > Custom CSS

/* Stacked elements */
@media screen and (max-width:991px) and (min-width:768px) {
html, body {overflow-x:hidden;}
div#page-section-618ed332e4b3b960a6632b5a .span-12 .col {
    width: 90% !important;
    margin-left: 5%;
    margin-right: 5%;
}
div#block-yui_3_17_2_1_1636750205557_3972 {
    display: none;
}
}

Thank you SO SO much, works like a charm! I really appreciate the help.

Best!

Is there a way to exclude this part of the index section?

Hi @tuanphan I have added this to a section on my website https://www.hornbeamtraining.co.uk/courses

which worked well on the areas wanted it to take effect I

but it has messed up the top section within the index section 

Is there a way to exclude this part of the index section? 

this is the code I popped in - 

@media screen and (max-width:900px) and (min-width:641px) {
section#mental-health-first-aid .col, section#mental-health-first-aid .col {
    float: none !important;
    width: auto !important;
}

}

I have removed until I can solve as the site is going live! 

Any help is apreciated  🙂 

You can add it in a new section, to make its id different

I meant this section images Mental Health First Aid & Suicide First Aid Courses

On 4/11/2022 at 4:52 AM, tuanphan said:

You can add it in a new section, to make its id different

I meant this section images Mental Health First Aid & Suicide First Aid Courses

I did think that but a shame there isn't another way!