title: Bootstrap 4 Flexbox disable flex for specific item
body: <p>I am aligning my items with <code>d-flex</code>. Using <a href="http://v4-alpha.getbootstrap.com/utilities/flexbox/#enable-flex-behaviors" rel="nofollow noreferrer">Bootstrap 4 Flexbox</a> (see image).</p>
  
  <p><a href="https://i.stack.imgur.com/i7Ppc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i7Ppc.png" alt="enter image description here"></a></p>
  
  <p>This is my markup:</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;div class="card"&gt;
    &lt;div class="card-block"&gt;
      &lt;div class="bulk-filter-wrapper d-flex"&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="edit-status"&gt;Published status&lt;/label&gt;
          &lt;select data-drupal-selector="edit-status" id="edit-status" name="status" class="form-select form-control"&gt;&lt;option value="All" selected="selected"&gt;- Any -&lt;/option&gt;&lt;option value="1"&gt;Published&lt;/option&gt;&lt;option value="2"&gt;Unpublished&lt;/option&gt;&lt;/select&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="edit-type"&gt;Content type&lt;/label&gt;
          &lt;select data-drupal-selector="edit-type" id="edit-type" name="type" class="form-select form-control"&gt;&lt;option value="All" selected="selected"&gt;- Any -&lt;/option&gt;&lt;option value="organization"&gt;Organisatie&lt;/option&gt;&lt;option value="page"&gt;Page&lt;/option&gt;&lt;option value="person"&gt;Persoon&lt;/option&gt;&lt;/select&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="edit-title"&gt;Title&lt;/label&gt;
          &lt;input data-drupal-selector="edit-title" type="text" id="edit-title" name="title" value="" size="30" maxlength="128" class="form-text form-control"&gt;
        &lt;/div&gt;
  
        &lt;input data-drupal-selector="edit-submit-content" type="submit" id="edit-submit-content" value="Filter" class="button js-form-submit form-submit btn btn-primary"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the button (Filter) on the right side I want to disable it's alignment and place it on a new row, on the left side, under the other input fields. How do I manage that?</p>
  
  <p>(Because it's rendered by Drupal, it's difficult to get the button out of the flex wrapper <code>bulk-filter-wrapper d-flex</code>).</p>