Site URL: https://www.4240architecture.com/project-experience-by-typology-1
I'm trying to reorder div elements on the mobile version of the page using css flex and order properties. Please forgive my overkill/messy code. I'm having trouble 1. targeting ids 2. obviously making this function. Any help is appreciated. Thank you.
@media only screen and (max-width: 540px) { html > body
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic img
{ display: flex !important;
flex-direction: column !important;
}
}
@media only screen and (max-width: 540px) { html > body
#navigator .page .row
{ display: flex !important;
flex-direction: column !important;}
}
@media only screen and (max-width: 540px) { html > body .sqs-block-image .image-block-outer-wrapper.image-block-v2 a.image-inset, .sqs-block-image .image-block-outer-wrapper.image-block-v2 a.image-title-wrapper
{ display: flex !important;
flex-direction: column !important;
}
}
@media only screen and (max-width: 540px)
{
div#block-yui_3_17_2_1_1553018891518_15098
{display: flex !important;
flex-direction: column !important;
order: 1;}
div#block-yui_3_17_2_1_1553017357166_5571
{display: flex !important;
flex-direction: column !important;
order: 2;}
div#block-yui_3_17_2_1_1553018891518_17028
{display: flex !important;
flex-direction: column !important;
order: 3;}
div#block-yui_3_17_2_1_1553018891518_11185
{display: flex !important;
flex-direction: column !important;
order: 4;}
div#block-yui_3_17_2_1_1553017357166_7475
{display: flex !important;
flex-direction: column !important;
order: 5;}
div#block-yui_3_17_2_1_1553018891518_29032
{display: flex !important;
flex-direction: column !important;
order: 6;}
div#block-yui_3_17_2_1_1553018891518_6669
{display: flex !important;
flex-direction: column !important;
order: 7;}
div#block-yui_3_17_2_1_1592859351049_31227 {display: flex !important;
flex-direction: column !important;
order: 8;}
}
