title: Bootstrap grid with collapsed container in between
body: <p>It's my very first question here and i hope you can help me. I'm trying to set up a product-overview page with the bootstrap grid. I have got 4 products in a row for large screen sizes. For smaller screen sizes i'd like to have 2 products per row.</p>
  
  <p>The trick is, i want to have the product details in a collapsed container between the rows, that opens up, when i click on a product. It's working for the large screen sizes with 4 products. But how to achieve that the collapsed container is showing up right after the row, where i clicked my product, independent of how many products i have got per row. On smaller sizes the collapsed container opens after the second row, even if i click a product in the first row.</p>
  
  <p>When i place every collapsed container right behind the product in the markup it pushes away the other products when i open it up.</p>
  
  <p>Sorry, it's a bit complicated, i hope you know what i mean.</p>
  
  <p>For better understanding have a look on my pen on codepen.</p>
  
  <p>I want to keep it as simple as possible and I'm not sure which way to go?</p>
  
  <p><a href="http://codepen.io/auftakt/pen/PWxJVX" rel="nofollow noreferrer">http://codepen.io/auftakt/pen/PWxJVX</a></p>
  
  <p>Tanks to all.</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-js lang-js prettyprint-override"><code>$('.collapse-btn').on('click',function(){$('.collapse').collapse('hide');})</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin-top: 50px;
    overflow-y: scroll;
  }
  
  .img-responsive {
    width:100%;
  }
  
  .col-xs-6{
    margin-bottom: 20px;
  }
  
  .product-detail {
    width: 100%;
    height:300px;
    background-size: cover;
    background-position: center center;
  }
  
  .no-padding-left {
    padding-left: 0;
  }
  
  .product-collapse-wrap &gt; div {
    margin-bottom: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3 col-xs-6"&gt;
        &lt;a class="collapse-btn" data-toggle="collapse" href="#Product-1" aria-expanded="false" aria-controls="Product-1"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/600x600"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-xs-6"&gt;
        &lt;a class="collapse-btn" data-toggle="collapse" href="#Product-2" aria-expanded="false" aria-controls="Product-2"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/600x600"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-xs-6"&gt;
        &lt;a class="collapse-btn" data-toggle="collapse" href="#Product-3" aria-expanded="false" aria-controls="Product-3"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/600x600"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-xs-6"&gt;
        &lt;a class="collapse-btn" data-toggle="collapse" href="#Product-4" aria-expanded="false" aria-controls="Product-4"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/600x600"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="product-collapse-wrap"&gt;
      &lt;div id="Product-1" class="col-md-12 collapse"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 no-padding-left"&gt;
            &lt;div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;h3&gt;Product 1&lt;/h3&gt;
            &lt;ul&gt;
              &lt;li&gt;Flachheizkörper&lt;/li&gt;
              &lt;li&gt;Planheizkörper&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Product-2" class="col-md-12 collapse"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 no-padding-left"&gt;
            &lt;div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;h3&gt;Product 2&lt;/h3&gt;
            &lt;ul&gt;
              &lt;li&gt;Flachheizkörper&lt;/li&gt;
              &lt;li&gt;Planheizkörper&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Product-3" class="col-md-12 collapse"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 no-padding-left"&gt;
            &lt;div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;h3&gt;Product 3&lt;/h3&gt;
            &lt;ul&gt;
              &lt;li&gt;Flachheizkörper&lt;/li&gt;
              &lt;li&gt;Planheizkörper&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Product-4" class="col-md-12 collapse"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 no-padding-left"&gt;
            &lt;div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;h3&gt;Product 4&lt;/h3&gt;
            &lt;ul&gt;
              &lt;li&gt;Flachheizkörper&lt;/li&gt;
              &lt;li&gt;Planheizkörper&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="col-md-3 col-xs-6"&gt;
        &lt;a class="collapse-btn" data-toggle="collapse" href="#Product-5" aria-expanded="false" aria-controls="Product-5"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/600x600"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-xs-6"&gt;
        &lt;a class="collapse-btn" data-toggle="collapse" href="#Product-6" aria-expanded="false" aria-controls="Product-6"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/600x600"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-xs-6"&gt;
        &lt;a class="collapse-btn" data-toggle="collapse" href="#Product-7" aria-expanded="false" aria-controls="Product-7"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/600x600"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-xs-6"&gt;
        &lt;a class="collapse-btn" data-toggle="collapse" href="#Product-8" aria-expanded="false" aria-controls="Product-8"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/600x600"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="product-collapse-wrap"&gt;
      &lt;div id="Product-5" class="col-md-12 collapse"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 no-padding-left"&gt;
            &lt;div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;h3&gt;Product 5&lt;/h3&gt;
            &lt;ul&gt;
              &lt;li&gt;Flachheizkörper&lt;/li&gt;
              &lt;li&gt;Planheizkörper&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Product-6" class="col-md-12 collapse"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 no-padding-left"&gt;
            &lt;div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;h3&gt;Product 6&lt;/h3&gt;
            &lt;ul&gt;
              &lt;li&gt;Flachheizkörper&lt;/li&gt;
              &lt;li&gt;Planheizkörper&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Product-7" class="col-md-12 collapse"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 no-padding-left"&gt;
            &lt;div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;h3&gt;Product 7&lt;/h3&gt;
            &lt;ul&gt;
              &lt;li&gt;Flachheizkörper&lt;/li&gt;
              &lt;li&gt;Planheizkörper&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Product-8" class="col-md-12 collapse"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 no-padding-left"&gt;
            &lt;div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;h3&gt;Product 8&lt;/h3&gt;
            &lt;ul&gt;
              &lt;li&gt;Flachheizkörper&lt;/li&gt;
              &lt;li&gt;Planheizkörper&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>