How to swap blocks in the mobile version?

Question

Bootstrap

I made a link with cross content (on the left is a block with background, on the right is a block with text). the next link with blocks in reverse (text on the left, links on the right).
It is necessary that the mobile version has uniformity (text on top, image below for everyone).

<a href="">
         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show" style="background-image: url(assets/img/img7.jpg);">
  <div class="dark"></div>
         </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show">
    <h3>Заголовок</h3>
    <p>Текст</p>
    </div>
</a>  

<a href="">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show">
    <h3>Заголовок</h3>
    <p>Текст </p>
  </div>				   				
  div class=" col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show" style="background-image: url(assets/img/img8-1.jpg);">
    <div class="dark"></div>
  </div>
</a>

Answer 1

You need to arrange the blocks the way you want them to be in the mobile version. Those. block_text->block_image . Just add the class col-sm-pull-6 to the first block_image

<a href="">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show">
    <h3>Заголовок</h3>
    <p>Текст</p>
    </div>
 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-sm-pull-6 goods1 _anim-show" style="background-image: url(assets/img/img7.jpg);">
  <div class="dark"></div>
         </div>
</a>  

<a href="">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show">
    <h3>Заголовок</h3>
    <p>Текст </p>
  </div>				   				
  div class=" col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show" style="background-image: url(assets/img/img8-1.jpg);">
    <div class="dark"></div>
  </div>
</a>

Answer 2

Make the blocks themselves uniform, and move the content itself through order. Then on the mobile version you won’t have to think about how to properly position the content