title: Bootstrap - How do I make accordions "flow"? (each one containing a Twitter embed)
body: <p>I found this nice example that &quot;flows&quot; much the way I want:</p>
  <p><a href="http://www.marcorpsa.com/ee/t1495.html" rel="nofollow noreferrer">http://www.marcorpsa.com/ee/t1495.html</a></p>
  <p>I managed to change the &quot;75% width&quot; of the first column, and all was well. But if I put a Twitter embed inside each accordion body, they don't collapse anymore. [See below]</p>
  <p>A &quot;simple&quot; accordion works fine... but I can't get it to wrap the way I want (i.e., put as many horizontally as possible). [See below]</p>
  <p>I'm sure I'n being dense here. I don't know Bootstrap.</p>
  <p>TIA</p>
  <p>Flows well, but only collapses when I put text in it:</p>
  <pre><code>
  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Bootstrap collapsing columns example&lt;/title&gt;
  &lt;link href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;!--
  &lt;link href=&quot;css/custom.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;style type=&quot;text/css&quot;&gt;
  .cell {
    border: 1px solid #555;
  }
  &lt;/style&gt;
  --&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;wrapper&quot;&gt;
    &lt;header&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;h1 class=&quot;col-lg-9&quot;&gt;Bootstrap collapsing columns example&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;h5&gt;Author: Julian Hansen, August 2016&lt;/h5&gt;
      &lt;p&gt;This sample demonstrates a grid setup using Bootstrap where on large screens you have a left column taking up 75% of the screen and three right columns each 25%&lt;/p&gt;
      &lt;p&gt;On medium screens this changes to a 50/50 split&lt;/p&gt;
      &lt;p&gt;On small screens the columns collapse under each other&lt;/p&gt;
      &lt;p&gt;Use the browser screen emulation (Shfit+Ctrl+M) to see how the cells respond to changing screen size&lt;/p&gt;
  &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;cell col-lg-9 col-md-6 col-sm-12&quot;&gt;
          &lt;a class=&quot;twitter-timeline&quot; data-width=&quot;400&quot; data-height=&quot;600&quot; 
          href=&quot;https://twitter.com/SpaceX?ref_src=twsrc%5Etfw&quot;&gt;Tweets by SpaceX&lt;/a&gt; 
          &lt;script async src=&quot;https://platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
        &lt;/div&gt;
        &lt;div class=&quot;cell col-lg-3 col-md-6 col-sm-12&quot;&gt;2. This is the right hand column&lt;/div&gt;
        &lt;div class=&quot;cell col-lg-3 col-md-6 col-lg-offset-9 col-md-offset-6 col-sm-12&quot;&gt;3. Second row in right column&lt;/div&gt;
        &lt;div class=&quot;cell col-lg-3 col-md-6 col-lg-offset-9 col-md-offset-6 col-sm-12&quot;&gt;4. Third row in right column&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;
    &lt;div class=&quot;container&quot;&gt;
      Copyright Julian Hansen &amp;copy; 2016
    &lt;/div&gt;
  &lt;/footer&gt;
   
  &lt;script src=&quot;http://code.jquery.com/jquery.js&quot;&gt;&lt;/script&gt;
   
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Collapses nicely, but won't flow the way I want:</p>
  <pre><code>
  &lt;head&gt;
  &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot; 
   rel=&quot;stylesheet&quot; integrity=&quot;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&quot; 
   crossorigin=&quot;anonymous&quot;&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js&quot; 
   integrity=&quot;sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p&quot; 
   crossorigin=&quot;anonymous&quot;&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;div class=&quot;accordion&quot; id=&quot;accordionExample&quot;&gt;
    &lt;div class=&quot;accordion-item&quot;&gt;
      &lt;h2 class=&quot;accordion-header&quot; id=&quot;headingOne&quot;&gt;
        &lt;button class=&quot;accordion-button&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
          Accordion Item #1
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id=&quot;collapseOne&quot; class=&quot;accordion-collapse collapse show&quot; aria-labelledby=&quot;headingOne&quot; data-bs-parent=&quot;#accordionExample&quot;&gt;
        &lt;div class=&quot;accordion-body&quot;&gt;
          &lt;a class=&quot;twitter-timeline&quot; data-width=&quot;400&quot; data-height=&quot;600&quot; 
          href=&quot;https://twitter.com/SpaceX?ref_src=twsrc%5Etfw&quot;&gt;Tweets by SpaceX&lt;/a&gt; 
          &lt;script async src=&quot;https://platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;accordion-item&quot;&gt;
      &lt;h2 class=&quot;accordion-header&quot; id=&quot;headingTwo&quot;&gt;
        &lt;button class=&quot;accordion-button collapsed&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseTwo&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseTwo&quot;&gt;
          Accordion Item #2
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id=&quot;collapseTwo&quot; class=&quot;accordion-collapse collapse&quot; aria-labelledby=&quot;headingTwo&quot; data-bs-parent=&quot;#accordionExample&quot;&gt;
        &lt;div class=&quot;accordion-body&quot;&gt;
          &lt;a class=&quot;twitter-timeline&quot; data-width=&quot;400&quot; data-height=&quot;600&quot; 
          href=&quot;https://twitter.com/NASA?ref_src=twsrc%5Etfw&quot;&gt;&lt;/a&gt; 
          &lt;script async src=&quot;https://platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;accordion-item&quot;&gt;
      &lt;h2 class=&quot;accordion-header&quot; id=&quot;headingThree&quot;&gt;
        &lt;button class=&quot;accordion-button collapsed&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseThree&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseThree&quot;&gt;
          Accordion Item #3
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id=&quot;collapseThree&quot; class=&quot;accordion-collapse collapse&quot; aria-labelledby=&quot;headingThree&quot; data-bs-parent=&quot;#accordionExample&quot;&gt;
        &lt;div class=&quot;accordion-body&quot;&gt;
          &lt;a class=&quot;twitter-timeline&quot; data-width=&quot;400&quot; data-height=&quot;600&quot; 
          href=&quot;https://twitter.com/SPACEdotcom?ref_src=twsrc%5Etfw&quot;&gt;&lt;/a&gt; 
          &lt;script async src=&quot;https://platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>