Putting two images next to each other in Bootstrap - html

Question

I want to put these two images next to each other but also if the screen gets too small want them to stack on top of each other. So this is what I have in Razor:
<div class="row">
<div class="col-sm-12">
#if (Model.ThumbnailUrl != null)
{
<span><img class="thumbnail" src="#Model.ThumbnailUrl" /></span>
}
#if (Model.SignatureUrl != null)
{
<span><img class="thumbnail" src="#Model.SignatureUrl" /></span>
}
</div>
</div>
And this is what was generated:
<div class="row">
<div class="col-sm-12">
<span style="display: inline"><img class="thumbnail" src="something.jpg;width=200&height=200"></span>
<span style="display: inline"><img class="thumbnail" src="whatever.jpg;width=200&height=200"></span>
</div>
</div>
And this is how it looks:
They are stacking too early. Screen was full size. Maybe just in Small or Extra Small I want them to stack, otherwise I want them side by side.
How should I fix this?

Answer 1

Here is a solution:
1/ Make 2 columns with Bootstrap responsive classes for different screen sizes.
2/ Use img-responsive class on images to adapt the img size to the content when resizing.
.row.row-no-margin {
margin-left: 0px;
margin-right: 0px;
}
.col-no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-no-margin">
<div class="col-xs-12 col-sm-6 col-no-padding">
<img class="thumbnail img-responsive" src="http://placehold.it/600x400">
</div>
<div class="col-xs-12 col-sm-6 col-no-padding">
<img class="thumbnail img-responsive" src="http://placehold.it/600x400">
</div>
</div>

Answer 2

Try something like this:
<div class="row">
<div class="col-sm-6">
#if (Model.ThumbnailUrl != null)
{
<span><img class="thumbnail" src="#Model.ThumbnailUrl" /></span>
}
</div>
<div class="col-sm-6">
#if (Model.SignatureUrl != null)
{
<span><img class="thumbnail" src="#Model.SignatureUrl" /></span>
}
</div>
</div>
Basically, you need to use Bootstrap's columns to arrange your images. Right now you are creating a column of size 12, the entire width of the row, for each image.
For more information:
https://getbootstrap.com/examples/grid/