Bootstrap responsive audio player <p>I need help. When I'm using an audio in the container (bootstrap) I have 4 player in 1 row - that's fine (col-lg-3), but when I'm resizing my window (from col-md-4 to col-xs-6) then magic happens... players are in different places :/ you can look at this here:</p> <p><a href="https://i.stack.imgur.com/WxQRb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WxQRb.jpg" alt="enter image description here"></a></p> <pre><code>&lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"&gt; &lt;p class="titles"&gt;Bird Wings&lt;/p&gt; &lt;audio class="audio controls"&gt; &lt;source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg"&gt; Your browser does not support the audio element. &lt;/audio&gt; &lt;/div&gt; &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"&gt; &lt;p class="titles"&gt;Bird Wings&lt;/p&gt; &lt;audio class="audio controls"&gt; &lt;source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg"&gt; Your browser does not support the audio element. &lt;/audio&gt; &lt;/div&gt; &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"&gt; &lt;p class="titles"&gt;Bird Wings&lt;/p&gt; &lt;audio class="audio controls"&gt; &lt;source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg"&gt; Your browser does not support the audio element. &lt;/audio&gt; &lt;/div&gt; &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"&gt; &lt;p class="titles"&gt;Bird Wings&lt;/p&gt; &lt;audio class="audio controls"&gt; &lt;source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg"&gt; Your browser does not support the audio element. &lt;/audio&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>