Get image to stay in the same position on mobile view

I have a section where there is an image on the left, some text in the middle and a block quote on the right. Just below that I want to have the same content but with the block quote and image swapped around i.e.: block quote on the left and image on the right. Here is the code with the image on the left

<div class="section mcb-section" style="padding-top:120px; padding-bottom:80px; ">
  <div class="section_wrapper mcb-section-inner">
    <div class="team team_list clearfix">
      <div class="column one-fourth">
        <div class="image_frame no_link scale-with-grid">
          <div class="image_wrapper">
            <img class="scale-with-grid animal-avit" src="<?php bloginfo('template_directory'); ?>/images/home_betheme_ourteam_4.jpg" alt="img">
          </div>
        </div>
      </div>
      <div class="column one-second">
        <div class="desc_wrapper">
          <h4>Mandy Moore</h4>
          <p class="subtitle">
            CEO
          </p>
          <hr class="hr_color">
          <div class="desc">
            <p class="big">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.
            </p>
            <p>
              Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra. mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean
              ligula.
            </p>
          </div>
        </div>
      </div>
      <div class="column one-fourth">
        <div class="bq_wrapper">
          <blockquote>
            Vitae adipiscing turpis. Aen ligula nibh, molestie sed vitae dictum in gravida
          </blockquote>
        </div>
      </div>
    </div>
  </div>
</div>

Open in new window


I just switched the code around and everything looks fine:

<div class="section-decoration bottom" style="background-image:url(<?php bloginfo('template_directory'); ?>/images/home_animals2_sectionbg4.png);height:33px"></div>
<div class="section mcb-section equal-height-wrap  " style="padding-top:120px; padding-bottom:80px; background-color:#1DA0EE">
  <div class="section_wrapper mcb-section-inner">
    <div class="team team_list clearfix">
      <div class="column one-fourth">
        <div class="bq_wrapper">
          <blockquote style="color:#fff;">
            Vitae adipiscing turpis. Aen ligula nibh, molestie sed vitae dictum in gravida
          </blockquote>
        </div>
      </div>
      <div class="column one-second">
        <div class="desc_wrapper_right">
          <h4 style="text-align:right; color:#fff;">Many Moore</h4>
          <p class="subtitle" style="text-align:right; color:#fff;">
            CEO
          </p>
          <hr class="hr_colorb">
          <div class="desc">
            <p class="big" style="text-align:right; color:#fff;">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.
            </p>
            <p style="text-align:right; color:#fff;">
              Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra. mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean
              ligula.
            </p>
          </div>
        </div>
      </div>
      <div class="column one-fourth">
        <div class="image_frame no_link scale-with-grid">
          <div class="image_wrapper">
            <img class="scale-with-grid animal-avit" src="<?php bloginfo('template_directory'); ?>/images/home_betheme_ourteam_4.jpg" alt="img">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="section-decoration bottom" style="background-image:url(<?php bloginfo('template_directory'); ?>/images/home_animals2_decoration3.png);height:43px"></div>
</div>

Open in new window


That is until I go to mobile view. For the first code block, the image shows at the top, then the text and the block quote at the bottom. When I scroll down to the second code block, the block quote it first, then the text and the image last. How can I get it to still display the same order on a mobile device?
LVL 1
Black SulfurAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Black SulfurAuthor Commented:
Not sure if it's okay to do this but I found that if I add an inline style of float:right; to the first div:

<div class="column one-fourth" style="float:right;">

Open in new window


then it works how I would like it to.
0
mohan singhWeb developerCommented:
Can you provide me a link of your page
Thank you
0
Black SulfurAuthor Commented:
Sorry, Mohan. It is only on localhost, not live.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

mohan singhWeb developerCommented:
Yes you can show at same position of your image on mobile view

css
#counter {
    position: relative;
    display: inline;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
    max-width: 100%;
}

Open in new window

 <div id="counter">    
  <img src="" alt="bg" />
 </div>

Open in new window

Thank You
0
Julian HansenCommented:
This is a common problem with mobile views - the order of blocks change to an undesirable order when stacked.

To fix you usually swap the float for the blocks - depends on your markup. You would need to show us your CSS so that we can build a replica and demonstrate the issue.

Basically though - if you are floating your cells then you need to add a style to the second row cells call them switch-left and switch-right

Then add a media query to set the float's on these when the screen is at (or larger) than the size when they will be side by side

@media (min-width: 768px) {
  .switch-left {
    float: left;
  }
  .switch-right {
    float: right;
  }
}

Open in new window

Sample html
Here we have the order as per our desired MOBILE view - because mobile STACKS. In the non-mobile view - we switch the floats to make the order the way we want it for larger
<div class="row">
    <div class="col-md-6 col-sm-12"><img src="images/foreground2.png"></div>
    <div class="col-md-6 col-sm-12"><blockquote>Some text goes here</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-12 switch-right"><img src="images/foreground3.png"></div>
    <div class="col-md-6 col-sm-12 switch-left"><blockquote>Some other text goes here</div>
  </div>

Open in new window


You can see a sample here
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Black SulfurAuthor Commented:
@ Julian, that worked perfectly, thank you!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.