title: Putting two images next to each other in Bootstrap
body: <p>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:</p>
  
  <pre><code>&lt;div class="row"&gt;
  
      &lt;div class="col-sm-12"&gt;
          @if (Model.ThumbnailUrl != null)
          {
              &lt;span&gt;&lt;img class="thumbnail" src="@Model.ThumbnailUrl" /&gt;&lt;/span&gt;
          }
          @if (Model.SignatureUrl != null)
          {
              &lt;span&gt;&lt;img class="thumbnail" src="@Model.SignatureUrl" /&gt;&lt;/span&gt;
  
          }
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is what was generated:</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
                  &lt;span style="display: inline"&gt;&lt;img class="thumbnail" src="something.jpg;width=200&amp;amp;height=200"&gt;&lt;/span&gt;
                  &lt;span style="display: inline"&gt;&lt;img class="thumbnail" src="whatever.jpg;width=200&amp;amp;height=200"&gt;&lt;/span&gt;
          &lt;/div&gt;       
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/ySLAc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ySLAc.png" alt="enter image description here"></a></p>
  
  <p>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. </p>
  
  <p>How should I fix this?</p>