Bootstrap响应式音频播放器

Question

我需要帮助。 当我在容器中使用音频（引导程序）时，我在一行中有4个玩家 - 这很好（col-lg-3），但是当我调整窗口大小时（从col -md-4到col-xs-6）然后魔术发生......玩家在不同的地方：/你可以在这里看看：

<div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <p class="titles">Bird Wings</p>
        <audio class="audio controls">
        <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <p class="titles">Bird Wings</p>
        <audio class="audio controls">
        <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <p class="titles">Bird Wings</p>
        <audio class="audio controls">
        <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <p class="titles">Bird Wings</p>
        <audio class="audio controls">
        <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
    </div>
  </div>