How do you make a responsive footer like this? - html

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