Change order of text and image on small screens

Question

I have on page text and image under that text (multiple blocks). Sample : JsFiddle

<div class="container">
<div class="row">
    <div class="col-md-6">
        <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="img-responsive"/>
        <br/>
        <h4>Test Text</h4>
    </div>
         <div class="col-md-6">
                         <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="img-responsive"/>
        <br/>
        <h4>Test Text</h4>
         </div>
</div>

But on small screens text which is under image can be recognized by user as text for next image, which is wrong.

So i want to move text above the image on small screens.

Ideas that i have currently - add duplicate of existing text and add bootstrap classes hidden/visible to them. And switch text in order to size of screen.

But i hope there is more ellegant solution without adding same text again but in different possition

try this: https://scotch.io/tutorials/reorder-css-columns-using-bootstrap — Luís P. A., May 19 '15 at 10:18
you mean when you're in small screen the text for the image will be display above the image? — Elle, May 20 '15 at 06:35
In case someone is facing this problem with Wordpress + Elementor (Google brought me here), there is an easy solution: https://www.youtube.com/watch?v=GysPzwQMU1g — J0ANMM, Aug 05 '21 at 07:48

score 0 · Answer 1 · answered May 19 '15 at 10:25

Try this..I edited your code

<div class="container">
<div class="row">
    <div class="col-md-6">
         <h4>Test Text</h4>
        <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="img-responsive"/>
         <h4>Test Text</h4>
        <br/>

    </div>
         <div class="col-md-6">
                         <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="img-responsive"/>
        <br/>

         </div>
</div>

tell exactly what you want ? – Kevin Andrid May 20 '15 at 03:59 — Kevin Andrid, May 20 '15 at 03:59

score 0 · Answer 2 · answered May 19 '15 at 10:29

0

You can use media queries and display: flex property and order the elements.

CSS

@media (max-width:768px) {
.row .col-md-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

img {
  order: 2;
}

h4 {
  order: 1;
 }
}

answered May 19 '15 at 10:29

m4n0

29,823
27
76
89

Change order of text and image on small screens

2 Answers2