CSS Aligning Images Along Side Text - html

Question

This question has probably been asked a million times; however, I can't seem to find an answer to my issue.
I have a footer that contains aligned copyright text and I am trying to add 3 logos to the right of it (without a line break). Once the screen is too small to contain the copyright and the logos, I want to move the logos below the copyright.
<footer>
<div class="legal">
<B>PRIVACY NOTICE</B> |
<B>LEGAL NOTICE</B>
<p>
Trademark text
</p>
<br />
<p>
Copyright text
</p>
</div>
<div class="logos">
<a href="#" target="_blank">
<img src="logo1.png" />
</a>
<a href="#" target="_blank">
<img src="logo2.png" />
</a>
<a href="#" target="_blank">
<img src="logo3.png" />
</a>
</div>
</footer>
I tried wrapping the copyrights and the logos in two separate divs and using float: left and right but failed. Since I need my copyright text to be aligned in the middle of the footer as shown above.
Any guidance would be greatly appreciated.

Answer 1

There are ways on how you want to achieve what you wanted.
Once the screen is too small to contain the copyright and the logos, I
want to move the logos below the copyright.
You will need to use CSS Media rule to achieve that.
You can try using CSS Flexbox.
footer{
width:100%;
display:flex;
flex-flow: row wrap;
align-items:center;
}
.legal{
width:80%;
text-align:center;
}
.logos{
width:20%;
text-align:right;
}
#media screen and (max-width:800px){
.legal{
width:100%;
}
.logos{
width:100%;
text-align:center;
}
}
<footer>
<div class="legal">
<B>PRIVACY NOTICE</B> |
<B>LEGAL NOTICE</B>
<p>
Trademark text
</p>
<p>
Copyright text
</p>
</div>
<div class="logos">
<a href="#" target="_blank">
<img src="logo1.png" />
</a>
<a href="#" target="_blank">
<img src="logo2.png" />
</a>
<a href="#" target="_blank">
<img src="logo3.png" />
</a>
</div>
</footer>
You can try using CSS Grid.
footer{
width:100%;
display:grid;
grid-template-rows: 1fr;
grid-template-columns: 80% 1fr;
align-items: center;
}
.legal{
text-align:center;
}
.logos{
justify-self: end;
}
#media screen and (max-width: 800px){
footer{
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr;
}
.logos{
justify-self: center;
}
}
<footer>
<div class="legal">
<B>PRIVACY NOTICE</B> |
<B>LEGAL NOTICE</B>
<p>
Trademark text
</p>
<p>
Copyright text
</p>
</div>
<div class="logos">
<a href="#" target="_blank">
<img src="logo1.png" />
</a>
<a href="#" target="_blank">
<img src="logo2.png" />
</a>
<a href="#" target="_blank">
<img src="logo3.png" />
</a>
</div>
</footer>
For more info about Grid and Flexbox. Please see this links CSS Flexbox | CSS Grid
Also please see this link for Media Rule | CSS Media Rule
Hope this helps