Javascript 如何动态更改元素对齐方式？

我想做什么：
我正在使用html、css和引导创建一个页脚。当页面在桌面上打开时，它看起来像这样（这就是我想要的）：

但是当网页达到最小宽度时，它看起来是这样的：

但是，当网页宽度减至最小时，我希望它看起来像这样：

问题/我尝试的内容：
因此，我在两件事上有困难。
问题1：我似乎找不到一个解决方案，一旦没有空间让图像和文本并排，我就可以让它们居中

问题2：我找不到一个解决方案，我可以保持黑色jumbotron的大小不变，并且可以防止文本从底部流出

我尝试创建一个表（用文本代替图像来测试它）。我想如果我把元素放在一个表格中，图像在最左边的列中居中，文本在最左边的列中居中，那么，当表格变得足够小时，列就会堆叠起来，元素就会居中。但我没法让它发挥作用

我还尝试在较大的一个内添加两个较小的Jumbotron。一个保存图像，另一个保存文本。但我仍然无法使图像正确居中，并且仍然存在文本从黑色jumbotron底部流出的问题

我做错了什么，如何使用CSS和HTML做我想做的事情？如果Javascript是唯一的解决方案，我不介意尝试，我只是不太使用它

代码：

这是我的HTML：

<div class="container">
    <div class = "grid">
       <div class="row">
             <div class="jumbotron" id="footerJumbotron">
                <img src="ContactImages\facebookLogo.png" id="facebookLogo">
                <img src="ContactImages\twitterLogo.png" id="twitterLogo">
                <img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
                <p id="footerFont">&copy; 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
             </div>
        </div>
    </div>
</div>

---

您可以通过引导网格和媒体查询来实现这一点

@介质（最小宽度：768px）{
.自定义行p{
文本对齐：右对齐；
}
}
@介质（最大宽度：768px）{
.自定义行{
文本对齐：居中；
}
}

一些我整理出来的东西，然后可以处理

HTML

---

如果没有像bootstrap等框架，请在

jumbotron

内部创建另一个元素

contentWrapper

并将内容放入其中，然后为其添加媒体查询。您需要设置

width

和

margin:auto

使其居中

尝试将窗口宽度调整到800像素以下，您将看到内容居中对齐

#facebook徽标{
浮动：左；
宽度：30px；
高度：30px；
保证金：5px；
}
#推特标志{
浮动：左；
宽度：40px；
高度：30px；
保证金：5px；
}
#youtubeLogo{
浮动：左；
宽度：40px；
高度：25px；
保证金：5px；
}
#页脚字体{
浮动：对；
颜色：白色；
字体大小：10px；
顶部填充：10px；底部填充：10px；文本对齐：右侧；
}
#大梁{
背景色：黑色；边框半径：0！重要；
高度：100px！重要；填充顶部：30px；
}
@介质（最大宽度：800px）{
.contentWrapper{
宽度：400px；
保证金：自动；
}
}

©；2016年公司名称。保留所有权利。
按公司名称创建和管理
<强> Bootstrap 4 < /强>您可以只使用响应对齐类，例如“代码>文本XS中心文本SM左，您的代码也是高度重复的，考虑如下：


\footerJumbotron img{
宽度：30px；
高度：30px；
保证金：5px；
}
#页脚字体{
颜色：白色；
字体大小：10px；
}
#大梁{
背景色：黑色；
边界半径：0！重要；
文本对齐：居中；
}

©；2016年公司名称。版权所有。

建造及保养；按公司名称管理
使用。
#facebookLogo{
float:left;
width:30px; 
height:30px;
margin:5px;
}

#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}

#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}

#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}

#footerJumbotron{
background-color:black;border-radius: 0 !important; 
height:100px !important;padding-top:30px;
}

  <footer>
    <div class="footer-social-wrapper">
      <div class="social-wrapper">
        <div class="social-icons"><div class="facebook"></div></div>
        <div class="social-icons"><div class="twitter"></div></div>
        <div class="social-icons"><div class="youtube"></div></div>
     </div>
    </div>
    <div class="footer-copy">
      <p>&copy; 2016 Company Name. All Rights Reserved.</p>
    </div>
  </footer>

  body {margin:0;padding:0;}
  footer,
  .social-wrapper {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;
    position: relative;
    height: 50px;
  }
  footer:before,
  .social-wrapper:before,
  footer:after,
  .social-wrapper:after { content: " "; display: table;}
  footer:after,
  .social-wrapper:after {clear: both;}

  .footer-social-wrapper {
    margin:0;
    padding: 0;
    position: relative;
    float: left;
    width: 30%;
  }

  .footer-copy {
    margin:0;
    padding:0;
    position: relative;
    float: left;
    width: 70%;
    height: 50px;
  }
  .footer-copy {
    text-align: right;
  }

    .social-wrapper .social-icons {
      margin: 0px;
      position: relative;
      float: left;
      width: 33.333%;
      height: auto;
  }

    .social-wrapper .social-icons .facebook {
      margin: 0 auto;
      background:blue;
       width: 40px;
      height: 40px;
    }
    .social-wrapper .social-icons .twitter {
      margin: 0 auto;
      background: red;
        width: 40px;
      height: 40px;
    }
  .social-wrapper .social-icons .youtube {
    margin: 0 auto;
      background: yellow;
      width: 40px;
    height: 40px;
    }

  @media(max-width:700px){
    .footer-social-wrapper,
    .footer-copy {
      margin: 0 auto;
      width: 100%;
      text-align: center;
    }
  }