dynamically align images to maximum 3 on desktop and 2 on mobile - twitter-bootstrap-3

Question

I have an upload component that previews selected images before the user can upload them to the server.
I want to display a maximum of 3 on the desktop and a maximum of 2 on the tablet and 1 on the mobile.
I don't know how many images the user will upload so it is a dynamic amount.
An example of an upload would generate something like this for 4 files.
<div>
<div>
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail">
<div class="caption">
<h3><span>obomber.jpg</span></h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/498e5d16-114e-41b5-8d4d-4e798c36861c" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail>
<div class="caption">
<h3><span>podcasts.png</span></h3>
<p>Delete</p>
</div>
<img src="blob:http%3A//localhost%3A3030/08a89a31-6822-4436-a8be-e89ddfee9f0f" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail">
<div class="caption">
<h3><span>tangents.png</span></h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/ae1c844f-f0d2-4a50-a0b1-c46b4c00a4ba" class="img-thumbnail">
</div>
</div>
</div>

Answer 1

So as some said in a comment use the bootstrap grid system, very useful and this can all be achieved by doing using this
http://getbootstrap.com/css/#grid
Here is something that you might be able to use sorry on my phone at the moment might be rough:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
</div>
</div>