Текст рядом с изображением и сложен на мобильный

Question

У меня возникли проблемы с адаптацией текста и изображения на мобильном устройстве.

Вот что у меня есть HTML:

<div class="split-content" style="width:50%; background-color: #ffffff; background: -webkit-linear-gradient(bottom, #FAFAFA, #ffffff ); height: 212.5;max-width: 300px; display: inline-block;float:left">

Lorem Ipsum dolor sit amet concectetur Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat volptatem goodsi.

И CSS:

<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<style>
  body {
    font-family: 'Lato', San serif;
    Font-weight: 300;
    letter-spacing: 0.5px;
  }
  .headers {
    Font-weight: 700 !important;
  }
  .heads {
  letter-spacing: 3px !important;
  Font-weight: 700 !important;
  }
  .blog {
  letter-spacing: 0.6px !important;
  Font-weight: 400 !important;
  }
</style>

Я хочу, чтобы эти изображения отображались поверх текста на мобильных устройствах.

Может кто-нибудь, пожалуйста, помогите мне, пожалуйста?

Answer 1

У меня есть ответ, вы можете использовать значения с плавающей точкой для такого подхода и сделать плавающий нет в мобильном разрешении с помощью медиа-запроса, это было бы так же, как вы хотели бы просматривать изображения сверху и их текст для мобильного разрешения. Пожалуйста, проверьте пример.

Код

.break {
  clear:both;
  display:block;
}
.right{ 
  float:right;
  width: 50%;
  height: 200px;
}
.left{ 
  float:left;
  width: 50%;
  height: 200px;
}
@media (max-width:767px){ .left, .right { float:none;}}

<div class="split-content" style="">
    <div class="right"><img src="https://dummyimage.com/200x200/000/fff"/></div>
    <div class="left">testtesttesttesttesttesttesttest</div>
    
    <div class="break"></div>
    
    <div class="left"><img src="https://dummyimage.com/200x200/000/fff"/></div>
    <div class="right">testtesttesttesttesttesttesttest</div>
    
    <div class="break"></div>
 </div>

Answer 2

Вот решение, которое я использовал на своем сайте для аналогичной ситуации
Если вы используете отображение flex-box для выравнивания и переноса контента, вы можете добавить CSSorder свойство, чтобы указать порядок элементов в выравнивании я изменил предыдущий код ответа с этим свойством взглянуть
Оставьте комментарий, если вы не понимаете ни одной строки...

.content{
  width: 50%;
  float:left;
  height: 200px;
}
@media (max-width:760px){
   .second{ order:1;}
  .first{ order:2;}
  .content{
    width: 90%;
    float: none;
  }
}

<div class="split-content" >
  <div style="display:flex; flex-wrap:wrap">
   <div class="content first">testtesttesttesttesttesttesttest</div>
    <div class="content second"><img src="https://dummyimage.com/200x200/000/fff"/></div></div>
    <div class="content"><img src="https://dummyimage.com/200x200/000/fff"/></div>
    <div class="content">testtesttesttesttest</div> 
    <div></div>
 </div>

Вот ссылка codepen, которую вы можете просмотреть и отредактировать, чтобы уточнить мою процедуру https://codepen.io/anon/pen/RZqEoy?editors=1100
Извините меня случайно не работает codepen
Поскольку вы сказали, что вы новичок, перейдите к свойствам отображения flex-box, и вы сможете точно настроить выравнивание каркаса веб-сайта так, как вам нужно, с помощью отображения flex-box. Благодарю вас...