How do you make a responsive footer like this?

Question

I want to make the footer look like this in Desktop:

In mobile it should look like this:

I tried the following, but the text seems to go out of bounds (note this is just one of my prototypes, you would get overwhelmed if I posted all of them here):

<div class="row">
  <div class="footercol1" style="line-height:10px;display: flex;">
    <div id="image" style="float: left; margin-left: 25px;">
      <img src="https://picsum.photos/200/200" width="73" />
    </div>
    <div class="col-sm-6" style="word-wrap:normal;max-width:300px;width:50%;float: right; margin-left: 10px;">
      <p style="font-size: 14px;">Text1 blablablablablablablabla</br>
        </br>
        blablablablablablablablablablablablablablabla</br>
        </br>
        blablablablablablalblalbblalblbalblbalblalblbabla<br /> <br /> blablablablabalbalblablalblalbbllabllbalblabla.
      </p>
    </div>
    <div class="col-sm-6" style="max-width:300px;float: right; width:50%;margin-left: 50px;font-size: 14px;">
      <strong style="color: #489523;">Text 2: </strong> blablablabalbalbalblbalblalblbalblablblalbalblblalblblalblabla <br /><br />
      <p>blablablablablablabalbalbalbalblablbablalblablablablabla</p>
      <br />
      <img class="alignleft" src="https://picsum.photos/70/30" alt="">
    </div>
  </div>
</div>

FYI: footercol1 doesn't yet contain any CSS rules, hence it's not appended to the question.

UPDATE

Text out of bounds problem is also visible in your snippet as well:

UPDATE 2

Adding the following CSS rules to p:

word-break: normal;
white-space: normal;

partly solves the overflow problem, but it makes the text quite "crambed" as a side effect. Any clue how to fix that?

Answer 1

You're already using flex on your footercol1, so the easiest would probably be to just to use a media query to define the flex direction.

Something like:

.footercol1 {
  display: flex;
}

p {
 overflow-wrap: break-word;
}

@media only screen and (max-width: 600px) {
  .footercol1 {
    flex-direction: column;
  }
}

<div class="row">
  <div class="footercol1" style="line-height:10px;display: flex;">
    <div id="image" style="float: left; margin-left: 25px;">
      <img src="https://picsum.photos/200/200" width="73" />
    </div>
    <div class="col-sm-6" style="word-wrap:normal;max-width:300px;width:50%;float: right; margin-left: 10px;">
      <p style="font-size: 14px;">Text1 blablablablablablablabla
        <br>
        <br> blablablablablablablablablablablablablablabla
        <br>
        <br> blablablablablablalblalbblalblbalblbalblalblbabla
        <br>
        <br> blablablablabalbalblablalblalbbllabllbalblabla.
      </p>
    </div>
    <div class="col-sm-6" style="max-width:300px;float: right; width:50%;margin-left: 50px;font-size: 14px;">
      <strong style="color: #489523;">Text 2: </strong> <p>blablablabalbalbalblbalblalblbalblablblalbalblblalblblalblabla</p>
      <br>
      <br>
      <p>blablablablablablabalbalbalbalblablbablalblablablablabla</p>
      <br>
      <img class="alignleft" src="https://picsum.photos/70/30" alt="">
    </div>
  </div>
</div>

flex-direction: row; is default. You should probably read up on flexbox:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex