How to force float?

Question

css

On some resolutions, the slogan breaks away from the logo and it does not look very nice. Why can this happen? On the right, a place in bulk, if desired, you can also transfer the slogan according to the words. Why is this happening? How to do forced bonding?

.logo_text {
  float: left;
}
.site_name_footer {
  font-size: 16px;
  line-height: 1em;
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
}
.site_name_description_footer {
  font-size: 14px;
  line-height: 1.5em;
  font-family: 'Open Sans',sans-serif;
  font-weight: 300;
}
.logo_img_footer {
  max-width: 45px;
  float: left;
  margin-right: 15px;
}

Answer 1

getbootstrap.com/components/#media did this and everything was fine. Xs than the usual styles did not suit him ...

Answer 2

float: right !important;

Answer 3

classes in bootstrap: pull-left, pull-right

Answer 4

overflow: hidden for the slogan, and there will be happiness