Div blocks on screen shrink?

Question

css

Good afternoon!
there is a header code for 3 blocks (logo, address, contacts)
when the screen shrinks, I mean ~ 490px, the widths of the blocks begin to shrink, but how to make them go under each other, and the content will be centered. Or at least if they do not fit in width, so that they begin to fold under each other.

like this

<div class="column-left">
<a href="#"><img src="#LOGO" width="130px" height="130px"></a>
</div>
   
<div class="column-center">
<b>Наш адрес:</b><br>
Московская область<br>
</div>
   
 <div class="column-right">
    <b>Звоните:</b>
    <a href="tel:[phone]">8(499)999-99-99</a><br>
    <a href="tel:[phone]">8(988)888-88-88</a>
</div>

css

spoiler

.column-left {
float: left;
width: 33%;
text-align: center;
margin-top: 15px;
}
.column-center {
display: inline-block;
width: 33%;
text-align: center;
margin-top: 15px;
}
.column-right {
float: right;
width: 33%;
text-align: center;
margin-top: 15px;
}

Answer 1

Made it through bootstrap. thanks everyone!

Answer 2

Use media queries. For example:

@media (max-width: 490px) {
  .column-left, .column-center, .column-right{
    width: 100%;
  }
}