title: Bootstrap 4 - Show one div and hide another one with single button action
body: <p>My purpose is to display:none "DIV1" and show "display:flex;" "DIV2" with a single action on the button.
  I think the best way is to use this : <a href="https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets</a>
  but I can't figure out how to do it.</p>
  
  <p>At the moment, I made this code but I think it's not a best practice when we use Bootstrap :</p>
  
  <p>CSS</p>
  
  <pre><code>@media (max-width: 576px)
  DIV1.openFrame {
    display:flex;
  }
  @media (max-width: 576px)
  DIV1.closeFrame {
    display:none;
  }
  @media (max-width: 576px)
  DIV2.openFrame {
    display:flex;
  }
  @media (max-width: 576px)
  DIV2.closeFrame {
    display:none;
  }
  </code></pre>
  
  <p>JAVASCRIPT (Something like this)</p>
  
  <pre><code>function toggleMenu() {
    // Something in JQuery
    $(".DIV1").toggleClass("openFrame")
    $(".DIV2").toggleClass("closeFrame")
  
    // OR
  
    $(".DIV1").toggleClass("closeFrame")
    $(".DIV2").toggleClass("openFrame")
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col d-flex DIV1"&gt;
        1 of 2
      &lt;/div&gt;
      &lt;div class="col d-flex DIV2"&gt;
        2 of 2
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  &lt;button class="btn" type="button" onClick="toggleMenu()"&gt;
  &gt;
  &lt;/button&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/qxz826kr/" rel="nofollow noreferrer">JsFiddle</a></p>
  
  <p>EDIT :</p>
  
  <p>What I tried with multi targets solution :</p>
  
  <pre><code>&lt;p&gt;
    &lt;button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2"&gt;Toggle both elements&lt;/button&gt;
  &lt;/p&gt;
  &lt;div class="row"&gt;
    &lt;div class="col"&gt;
      &lt;div class="collapse multi-collapse show" id="multiCollapseExample1"&gt;
        &lt;div class="card card-body"&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;div class="collapse multi-collapse" id="multiCollapseExample2"&gt;
        &lt;div class="card card-body"&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is the first block doesn't disappear even with display:none (I don't want free space at the left side).
  And very important, I want all blocks visible when the "md" breakpoint is reached. This is why I used media queries in CSS @media (max-width: 576px) for DIV1 and DIV2.</p>