title: Bootstrap Grid arrangement for 3 blocks with different height
body: <p>As attached picture showed, that is my target view with response width using Bootstrap, however, the below code couldn't make the position of block 3 just under block 1 before width&lt;sm.
  Please tell me how to do, thanks in advance.
  <a href="https://i.stack.imgur.com/7SuZV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7SuZV.jpg" alt="enter image description here" /></a></p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-sm-6&quot; style=&quot;height:100px;border:1px solid blue;&quot;&gt;1&lt;/div&gt;
      &lt;div class=&quot;col-sm-6&quot; style=&quot;height:200px;border:1px solid blue;&quot;&gt;2&lt;/div&gt;
      &lt;div class=&quot;col-sm-6&quot; style=&quot;height:100px;border:1px solid blue;&quot;&gt;3&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>