Change the div position on desktop - html

Question

I have these 2 divs (footer-txt and footer-img), on the mobile it works perfectly because I want the text on top and the 2 images on the bottom, like side by side.
But when the screen gets wider, I want the 2 images side by side and also the text div. Like a row with the 2 images and the text.
Is there a way that I can do this?
#footer {
background-color: #98AFFF;
}
.footer-txt {
font-size: 14px;
color: #464646;
text-align: left;
}
.footer-img {
display: flex;
gap: 25px;
}
<footer class="text-center text-lg-start" id="footer">
<div class="p-4" id="footer-content">
<div class="pb-2 footer-txt">
PROTESTE
</div>
<div class="pt-4 pb-2 justify-content-center footer-img">
<a href="#">
<img src="images/pag1/Mask group (1).png" alt="Google">
</a>
<a href="#">
<img src="images/pag1/Mask group.png" alt="Google">
</a>
</div>
</div>
</footer>

Answer 1

Well, if i understand correctly you can put this css in id #footer-content:
#footer-content {
display: flex;
flex-direction: row;
}
That way you change the direction of your div to as if it were a row.
If you only need this for when you're not mobile, you can add the following line:
#media screen and (min-width: 960px) {
#footer-content {
display: flex;
flex-direction: row;
}
}

Answer 2

The desired solution can be achieved using either Flex-Box or Grid & Responsive CSS using Media Queries
Flex Box
Grid Layout
Media Query
#footer {
background-color: #98AFFF;
}
#footer-content {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 25px;
}
.footer-txt {
font-size: 14px;
color: #464646;
text-align: left;
}
.footer-img {
display: flex;
gap: 25px;
}
/* Styling for Smaller Screens */
#media screen and (max-width: 500px) {
#footer-content {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
<footer class="text-center text-lg-start" id="footer">
<div class="p-4" id="footer-content">
<div class="pb-2 footer-txt">
PROTESTE
</div>
<div class="pt-4 pb-2 justify-content-center footer-img">
<a href="#">
<img src="images/pag1/Mask group (1).png" alt="Google">
</a>
<a href="#">
<img src="images/pag1/Mask group.png" alt="Google">
</a>
</div>
</div>
</footer>

Answer 3

You have to make the text and both of the images a flex item. You achive this by defining the flex property on the footer-content. All of its direct children are then flex-items.
Very good explanation of flex can be found here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If my solution is not what are you looking for you are maybe also looking for breakpoints and media queries for a responsive design.
#footer {
background-color: #98AFFF;
}
.footer-txt {
font-size: 14px;
color: #464646;
text-align: left;
}
#footer-content {
display: flex;
flex-wrap: wrap;
}
<footer id="footer">
<div id="footer-content">
<div class="footer-txt">
PROTESTE
</div>
<div class="footer-img">
<a href="#">
<img src="images/pag1/Mask group (1).png" alt="Google">
</a>
</div>
<div class="footer-img">
<a href="#">
<img src="images/pag1/Mask group.png" alt="Google">
</a>
</div>
</div>
</footer>