Responsive layout with collapsible components

Question

I'm developing a website using laravel framework along with bootstrap and i need to do responsive layout with collapsible components! I need some help :)

Large screen size:

Click on first picture:

Click on second picture:

Small screen size:

Click on first picture:

Click on second picture:

At this moment i have this problem with large screen size:

Code: bootply

<section class="container full-width">
    <div class="row" id="accordion">
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
    </div>
</section>

Ok! How can I stretch the collapsible component? How works the bootstrap collapse for to close the others collapses when i click on other?

I hope I have been able to explain my problem :)

Thanks for your attention!

Edit:

Solved:

bootply

This layout on foreach (3 items per row)

<section class="container-fluid no-padding">
     <div class="row no-padding">
          <div id="accordion-lg">
               <div class="hidden-xs panel">
                    @foreach (array_chunk($collection, 3) as $row)
                         @foreach ($row as $item)
                         <a class="col-lg-4 no-padding" data-toggle="collapse" href="{{ '#collapse-lg'.$item->id }}" data-parent="#accordion-lg">
                              Collapse Toogle
                         </a>
                         @endforeach
                         @foreach ($row as $item)
                         <div id="{{ 'collapse-lg'.$item->id }}" class="collapse">
                              Collapse
                         </div>
                         @endforeach
                    @endforeach
               </div>
          </div>
          <div id="accordion-xs">
               <div class="hidden-lg panel">
               @foreach ($category->trips as $item)
                    <a class="col-xs-12 no-padding" data-toggle="collapse" href="{{ '#collapse-xs'.$item->id }}" data-parent="#accordion-xs">
                        Collapse Toogle
                    </a>
                    <div id="{{ 'collapse-xs'.$item->id }}" class="collapse">
                        Collapse
                    </div>
               @endforeach
               </div>
          </div>  
     </div>
</section>

Thaks for help to solve this problem!

Answer 1

So, unfortunately, the behavior you want at these breakpoints is not possible without duplicating content. In essence, you will have two accordions, one which shows on lg and one for xs.

There are downsides to duplicating content (such as increased load times, higher maintenance, increased time to make changes, etc) but if you find them acceptable, I have the solution below.

I went ahead and refactored your code (while trying to maintain most of the things you were doing - such as no padding) and removed a lot of extra bootstrap classes which were not necessary. The two accordions are now completely split apart; the lg one comes first, then the xs one.

The code is available here: http://www.bootply.com/8sga1R1l0F

I also noticed another problem in the original code you supplied. When you would click on an element in the accordion, it would not hide any other element that was showing. This is due to the 'bug' discussed here: Bootstrap 3 Accordion button toggle "data-parent" not working

Let me know if you have any questions.

For completeness, the full code is below:

HTML

<section class="container-fluid no-padding">
    <div class="row no-padding">
        <div class="hidden-xs">
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            </div>
            <div id="collapseBottom" class="hidden-xs collapse in">
                <div class="col-lg-4 no-padding">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
                <div class="col-lg-4 no-padding cyan">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
                <div class="col-lg-4 no-padding">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
            </div>
        </div>
        <div id="xsAccordion">
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseOne" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseOne" class="collapse in">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseTwo" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseTwo" class="collapse">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseThree" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseThree" class="collapse">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
       </div>
   </div>
</section>

CSS

.no-padding {
    margin: 0 !important;
    padding: 0 !important;
}

.cyan { 
    color: #00b1ba;
}

Answer 2

With bootstrap 4, you change the order of the elements using the order classes. First, arrange the elements in order that you want to display on mobile devices.

Then apply the order-sm-* classes to change the order on the devices which are larger than mobile devices.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <h2>Simple Collapsible</h2>
        <p>Click on the button to toggle between showing and hiding content.</p>
        <div>
            <div class="row d-flex flex-wrap">
                <button type="button" class="btn btn-info order-md-0 col col-md-4 col-sm-12" data-toggle="collapse"
                    data-target="#demo">Simple collapsible</button>
                <div id="demo" class="collapse order-md-3 col-md-4 col-sm-12">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <button type="button" class="btn btn-info order-md-1 col-md-4 col-sm-12" data-toggle="collapse"
                    data-target="#demo2">Simple collapsible</button>
                <div id="demo2" class="collapse order-md-4 col-md-4 col-sm-12">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <button type="button" class="btn btn-info order-md-2 col-md-4 col-sm-12" data-toggle="collapse"
                    data-target="#demo3">Simple collapsible</button>
                <div id="demo3" class="collapse order-md-5 col-md-4 col-sm-12">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshots

Desktop Mobile

---

Desktop Expanded

Mobile Expanded