O
O
Ovanek2020-09-16 12:29:22
Bootstrap
Ovanek, 2020-09-16 12:29:22

How to swap blocks in the mobile version?

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 the question

In order to leave comments, you need to log in

2 answer(s)
D
Danny Arty, 2020-09-16
@Ovanek

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>

N
Nikita Mikhailov, 2020-09-16
@Psixodelik

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question