title: Using .col-* in .d-flex container bootstrap 4
body: <p>Is it (allowed) recommended to use <code>.col-*</code>'s as children in a <code>.d-flex</code> container? Or is it not the way <code>.d-flex</code> should be used but rather use <code>.row</code>?</p>
  <hr />
  <p>In the <a href="https://getbootstrap.com/docs/4.0/utilities/flex/" rel="nofollow noreferrer">Bootstrap 4 Docs</a> I cant find any example which uses a <code>.col-*</code> in a <code>.d-flex</code> container. They are only using layouts like this</p>
  <pre><code>&lt;div class=&quot;d-flex flex-row&quot;&gt;
    &lt;div class=&quot;p-2&quot;&gt;Flex item 1&lt;/div&gt;
    &lt;div class=&quot;p-2&quot;&gt;Flex item 2&lt;/div&gt;
    &lt;div class=&quot;p-2&quot;&gt;Flex item 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;d-flex flex-row-reverse&quot;&gt;
    &lt;div class=&quot;p-2&quot;&gt;Flex item 1&lt;/div&gt;
    &lt;div class=&quot;p-2&quot;&gt;Flex item 2&lt;/div&gt;
    &lt;div class=&quot;p-2&quot;&gt;Flex item 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But these <code>.p-2</code> classes doens't make these cols responsive. They only have a <code>padding</code> defined and no <code>width</code> has been given.</p>
  <p><strong>So for example I want something like this:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="d-flex flex-wrap"&gt;
    &lt;div class="col-sm-3 col-12"&gt;
      Responsive cols
    &lt;/div&gt;
    &lt;div class="col-sm-3 col-12"&gt;
      Responsive cols
    &lt;/div&gt;
    &lt;div class="col-sm-3 col-12"&gt;
      Responsive cols
    &lt;/div&gt;
    &lt;div class="col-sm-3 col-12"&gt;
      Responsive cols
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is a good or bad practice according Bootstrap? I can't find anything related about <code>.d-flex</code> and <code>.col-*</code> combined.</p>