Place image above text on mobile

Hey guys,

I'm looking to see how I can make an image appear on top of the header font for mobile view, while still keeping it to the right of the header for desktop view.

I'm using the Brine template. Any suggestions?

Thank you

-Jeff

Have you solved yet?

Yessir, thank you

It actually stopped working again...I used the code you provided in the other post:

@media screen and (max-width:640px) {
div#page-5e8296a9e2b00968faec388e>.row:first-child {
    display: flex;
    flex-direction: column-reverse;
}
}

On 4/4/2020 at 3:24 PM, jeffreyzie said:

It actually stopped working again...I used the code you provided in the other post:

@media screen and (max-width:640px) {
div#page-5e8296a9e2b00968faec388e>.row:first-child {
    display: flex;
    flex-direction: column-reverse;
}
}

Can you check site url again? I can't access

@tuanphan, can you use #block-id for this? or does it have to be div#page-id?

And has the code changed for this going into 7.1?

On 4/7/2021 at 8:20 PM, zzlogan said:

@tuanphan, can you use #block-id for this? or does it have to be div#page-id?

 

And has the code changed for this going into 7.1?

Hi. Can you share link to page where you have problem? We can check easier

I was able to use this code and it worked for me,

#block-yui_3_17_2_1_1617757843918_3161
{
  filter: drop-shadow(3px 3px 3px #000000);
}
[data-section-id="60691590e86fd05efdfb7e19"] {
  @media screen and (max-width:767px) {
  .sqs-row {
    display: flex;
    flex-direction: column-reverse;
  }}}

@media only screen and (max-width:640px) {#block-yui_3_17_2_1_1617757843918_3161{
  width: 80% !important;
  margin:0 auto;
  }}

@media only screen and (min-width: 641px) and (max-device-width: 949px) {#block-yui_3_17_2_1_1617757843918_3161{width:100% !important; margin:0 auto;
  }}