Text next to Image vs. stacked on mobile

Question

I'm having trouble with making the text and image be responsive on mobile.

This is what I have 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 consectetur Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem commodi.

And 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>

I want these images to show on top of their text on mobile

Can someone please help me, please?

Answer 1

i have an answer, you can use float values for this kind of approach and make float none in mobile resolution using media query , it would be same as you like to view image on top and them text for mobile resolution. Kindly check the example.

Code

.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

Here is the solution i have used in my website for similar situation
If you use flex-box display for content alignment and wrapping then you can add CSS order property to specify the order of elements in alignment i have modified the previous answer code with that property have a look
Drop a comment if you dont understand any line...

.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>

Here is the codepen link you can view and edit that to clarify my procedure https://codepen.io/anon/pen/RZqEoy?editors=1100
Pardon me by any chance codepen doesnt work
As you said you are beginner then go through the flex box display properties you can make you website wire-frame alignment perfectly as you want with flex box display. Thank You...