title: Responsive DIVs placement with Bootstrap
body: <p>I need to place some <code>DIV</code>s inside their parent container, no matter if it is the <code>body</code>, table's <code>cell</code> or another <code>div</code>, with <a href="https://getbootstrap.com/docs/5.1/getting-started/introduction/" rel="nofollow noreferrer">Bootstrap 5</a>, like shown on the attached illustration:</p>
  <p><a href="https://i.stack.imgur.com/QKwjK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QKwjK.png" alt="" /></a></p>
  <p>In case of even number of <code>DIV</code>s they should take 50% of the available width placed by 2 at a single line. Or, in case there is odd number of <code>DIV</code>s, the last one should take 100% of the available width while all previous still take 50% of the available width and are placed by 2 at a single line.</p>
  <p>Preferably with possibility to change the <code>DIV</code>s order (like on the Mobile View example).</p>
  <p>There is no problem to make this with the <a href="https://getuikit.com/docs" rel="nofollow noreferrer">UIKit</a> using some simple code like</p>
  <pre><code>&lt;div class=&quot;uk-grid&quot;&gt;
      &lt;div class=&quot;uk-width-large-1-2&quot;&gt;DIV 1 takes 50% of available width&lt;/div&gt;
      &lt;div class=&quot;uk-width-large-1-2&quot;&gt;DIV 2 takes 50% of available width&lt;/div&gt;
      &lt;div class=&quot;uk-width-large-1-2&quot;&gt;DIV 3 takes 100% of available width&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But whatever I've searched for with Bootstrap's documentation (as well as Stack Overflow) I still can't find the solution.</p>