On the desktop is not a problem. But in order to reduce the screen, he first moved along with the picture, and then generally to a new line, it does not work.
enter image description here enter image description here

enter image description here

Closed due to the fact that off-topic by user33274, cheops , HamSter , Edward , AK ♦ Jul 20 '18 at 6:58 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • " Learning tasks are allowed as questions only on condition that you tried to solve them yourself before asking a question . Please edit the question and indicate what caused you difficulties in solving the problem. For example, give the code you wrote, trying to solve a problem "- Community spirit, cheops, HamSter, Edward
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    js is nothing to do here - done on the usual css3 - user33274
  • And how exactly is done? - Anton Fedorov
  • The digit with a point is positioned absolute, while on the mobile you are doing position: relative - soledar10
  • I specifically circled the red circle, what I need to do. A digit with a dot. Text and image I can arrange. But the figure with a point to arrange, and then properly adapt fails. - Anton Fedorov

2 answers 2

Example

* { padding: 0; margin: 0; box-sizing: border-box; } .container { max-width: 1170px; margin: 0 auto; padding: 15px; } .block { display: flex; align-items: center; position: relative; margin-bottom: 25px; } .block__item { width: 50%; padding: 15px; } .block__img { max-width: 100%; width: 100%; } .block__number { position: absolute; top: 25%; left: 50%; font-size: 28px; font-weight: 700; z-index: 99; } .block__number>span { color: #f00; } .block--reverse {} .block--reverse .block__item-content { order: 2; } .block--reverse .block__item-pict { order: 1; } .block--reverse .block__number { left: auto; right: 50%; } @media screen and (max-width: 576px) { .block { display: block; text-align: center; } .block__item { width: 100%; padding: 5px 0; } .block__number, .block--reverse .block__number { position: relative; top: 0; left: 0; right: 0; } } 
 <div class="container"> <div class="block"> <div class="block__number">01<span>.</span></div> <div class="block__item block__item-content"> <p>На десктопе расположить не проблема. А вот что бы при уменьшении экрана, он сначала вместе с картинкой сдвигался, а потом вообще на новую строку, не получается.</p> </div> <div class="block__item block__item-pict"> <img src="http://via.placeholder.com/200x200" class="block__img" alt=""> </div> </div> <div class="block block--reverse"> <div class="block__number">02<span>.</span></div> <div class="block__item block__item-content"> <p>На десктопе расположить не проблема. А вот что бы при уменьшении экрана, он сначала вместе с картинкой сдвигался, а потом вообще на новую строку, не получается.</p> </div> <div class="block__item block__item-pict"> <img src="http://via.placeholder.com/200x200" class="block__img" alt=""> </div> </div> </div>

    Something like this Tuts .

      <div class="wrapper"> <div class="wrapper-item"> <div class="h2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex aut modi est voluptates beatae architecto numquam, exercitationem, voluptatem nulla ullam facilis, enim debitis quae fuga alias officiis dolores voluptate reiciendis. </div> <div class="img"> <img src="http://dota.by/images/avatars//16882765904dd98d17c22fb.gif" width="100" height="100" alt=""> </div> </div> </div> .wrapper{ margin:0 auto; padding:1rem 2rem; height: auto; display: table; outline:1px solid black; } .wrapper-item{ position: relative; display: table-row; } .h2{ display: inline-block; font-size: 1rem; margin-right:1rem; width:350px; } .h2:after{ content:'01.'; color:blue; border:1px solid blue; border-radius:50%; padding:.5rem 1rem; position: absolute; top:0; transform: translateY(50%); right:4.5rem; } .img{ display: inline-block; } @media (max-width: 1000px) { .h2{ margin:0; } .h2:after{ content:none; } .h2:before{ content:'01.'; color:blue; border:1px solid blue; transform:none; border-radius:50%; position: relative; display:table; padding:.5rem 1rem; bottom:0; margin:0 auto 1rem auto; } .img{ display:table; margin:1rem auto 0rem auto; text-align: middle; position: relative; } }

    The screen size is already selected by yourself and tell the blocks how to behave.

    But if support for older versions of browsers is not needed, then it can be done on flex or on the grid (there are elements you can put as you like and anywhere).