accordion fix / vertical tabs fix

build/css/custom.css

@@ -1130,20 +1130,20 @@ article.media {
     font-size: 20px;
 }
 
-.accordion .panel {
+.accordion .card {
     margin-bottom: 5px;
     border-radius: 0;
     border-bottom: 1px solid #efefef;
 }
-
-.accordion .panel-heading {
+/* TODO to be deleted */
+/*.accordion .card-title {
     background: #F2F5F7;
     padding: 13px;
     width: 100%;
     display: block;
-}
+}*/
 
-.accordion .panel:hover {
+.accordion .card:hover {
     background: #F2F5F7;
 }
 

production/form_advanced.html

@@ -567,19 +567,19 @@
                                         </div>
                                         <div class="x_content">
                                             <div class="row">
-                                                <div class="col-md-2">
+                                                <div class="col-md-2 col-sm-4 col-4">
                                                     <p>Display value</p>
                                                     <input class="knob" data-width="100" data-height="120"
                                                            data-min="-100"
                                                            data-displayPrevious=true data-fgColor="#26B99A" value="44">
                                                 </div>
-                                                <div class="col-md-2">
+                                                <div class="col-md-2 col-sm-4 col-4">
                                                     <p>&#215; 'cursor' mode</p>
                                                     <input class="knob" data-width="100" data-height="120"
                                                            data-cursor=true
                                                            data-fgColor="#34495E" value="29">
                                                 </div>
-                                                <div class="col-md-2">
+                                                <div class="col-md-2 col-sm-4 col-4">
                                                     <p>Step 0.1</p>
                                                     <input class="knob" data-width="100" data-height="120"
                                                            data-min="-10000"
@@ -587,21 +587,21 @@
                                                            data-max="10000"
                                                            data-step=".1" value="0">
                                                 </div>
-                                                <div class="col-md-2">
+                                                <div class="col-md-2 col-sm-4 col-4">
                                                     <p>Angle arc</p>
                                                     <input class="knob" data-width="100" data-height="120"
                                                            data-angleOffset=-125
                                                            data-angleArc=250 data-fgColor="#34495E"
                                                            data-rotation="anticlockwise" value="35">
                                                 </div>
-                                                <div class="col-md-2">
+                                                <div class="col-md-2 col-sm-4 col-4">
                                                     <p>Alternate design</p>
                                                     <input class="knob" data-width="110" data-height="120"
                                                            data-displayPrevious=true data-fgColor="#26B99A"
                                                            data-skin="tron"
                                                            data-thickness=".2" value="75">
                                                 </div>
-                                                <div class="col-md-2">
+                                                <div class="col-md-2 col-sm-4 col-4">
                                                     <p>Angle offset</p>
                                                     <input class="knob" data-width="100" data-height="120"
                                                            data-angleOffset=90

production/general_elements.html

@@ -403,7 +403,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -500,7 +499,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -598,7 +596,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -626,22 +623,25 @@
                                         </div>
                                         <div class="x_content">
                                             <div class="row">
-                                                <div class="col-md-2">
+                                                <div class="col-md-2 col-sm-2 col-3">
                                                     <!-- required for floating -->
                                                     <!-- Nav tabs -->
                                                     <ul class="nav nav-tabs tabs-left flex-column" role="tablist">
-                                                        <li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a>
+                                                        <li class="nav-item"><a class="nav-link active" href="#home"
+                                                                                data-toggle="tab">Home</a>
                                                         </li>
-                                                        <li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a>
+                                                        <li class="nav-item"><a class="nav-link" href="#profile"
+                                                                                data-toggle="tab">Profile</a>
                                                         </li>
-                                                        <li class="nav-item"><a class="nav-link" href="#messages" data-toggle="tab">Messages</a>
+                                                        <li class="nav-item"><a class="nav-link" href="#messages"
+                                                                                data-toggle="tab">Messages</a>
                                                         </li>
-                                                        <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a>
+                                                        <li class="nav-item"><a class="nav-link" href="#settings"
+                                                                                data-toggle="tab">Settings</a>
                                                         </li>
                                                     </ul>
                                                 </div>
-
-                                                <div class="col-md-10">
+                                                <div class="col-md-10 col-sm-10 col-9">
                                                     <!-- Tab panes -->
                                                     <div class="tab-content">
                                                         <div class="tab-pane active" id="home">
@@ -665,7 +665,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -693,7 +692,7 @@
                                         </div>
                                         <div class="x_content">
                                             <div class="row">
-                                                <div class="col-md-10">
+                                                <div class="col-md-10 col-sm-10 col-9">
                                                     <!-- Tab panes -->
                                                     <div class="tab-content">
                                                         <div class="tab-pane active" id="home-r">
@@ -713,17 +712,21 @@
                                                         <div class="tab-pane" id="settings-r">Settings Tab.</div>
                                                     </div>
                                                 </div>
-                                                <div class="col-md-2">
+                                                <div class="col-md-2 col-sm-2 col-3">
                                                     <!-- required for floating -->
                                                     <!-- Nav tabs -->
                                                     <ul class="nav nav-tabs flex-column tabs-right">
-                                                        <li class="nav-item"><a class="active nav-link" href="#home-r" data-toggle="tab">Home</a>
+                                                        <li class="nav-item"><a class="active nav-link" href="#home-r"
+                                                                                data-toggle="tab">Home</a>
                                                         </li>
-                                                        <li class="nav-item"><a class="nav-link" href="#profile-r" data-toggle="tab">Profile</a>
+                                                        <li class="nav-item"><a class="nav-link" href="#profile-r"
+                                                                                data-toggle="tab">Profile</a>
                                                         </li>
-                                                        <li class="nav-item"><a class="nav-link" href="#messages-r" data-toggle="tab">Messages</a>
+                                                        <li class="nav-item"><a class="nav-link" href="#messages-r"
+                                                                                data-toggle="tab">Messages</a>
                                                         </li>
-                                                        <li class="nav-item"><a class="nav-link" href="#settings-r" data-toggle="tab">Settings</a>
+                                                        <li class="nav-item"><a class="nav-link" href="#settings-r"
+                                                                                data-toggle="tab">Settings</a>
                                                         </li>
                                                     </ul>
                                                 </div>
@@ -732,7 +735,6 @@
 
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -763,104 +765,114 @@
                                             <!-- start accordion -->
                                             <div class="accordion" id="accordion" role="tablist"
                                                  aria-multiselectable="true">
-                                                <div class="panel">
-                                                    <a class="panel-heading" role="tab" id="headingOne"
-                                                       data-toggle="collapse"
-                                                       data-parent="#accordion" href="#collapseOne" aria-expanded="true"
-                                                       aria-controls="collapseOne">
-                                                        <h4 class="panel-title">Collapsible Group Items #1</h4>
-                                                    </a>
-                                                    <div id="collapseOne" class="panel-collapse collapse in"
-                                                         role="tabpanel"
-                                                         aria-labelledby="headingOne">
-                                                        <div class="panel-body">
-                                                            <table class="table table-bordered">
-                                                                <thead>
-                                                                <tr>
-                                                                    <th>#</th>
-                                                                    <th>First Name</th>
-                                                                    <th>Last Name</th>
-                                                                    <th>Username</th>
-                                                                </tr>
-                                                                </thead>
-                                                                <tbody>
-                                                                <tr>
-                                                                    <th scope="row">1</th>
-                                                                    <td>Mark</td>
-                                                                    <td>Otto</td>
-                                                                    <td>@mdo</td>
-                                                                </tr>
-                                                                <tr>
-                                                                    <th scope="row">2</th>
-                                                                    <td>Jacob</td>
-                                                                    <td>Thornton</td>
-                                                                    <td>@fat</td>
-                                                                </tr>
-                                                                <tr>
-                                                                    <th scope="row">3</th>
-                                                                    <td>Larry</td>
-                                                                    <td>the Bird</td>
-                                                                    <td>@twitter</td>
-                                                                </tr>
-                                                                </tbody>
-                                                            </table>
+                                                <div class="card">
+                                                    <div class="card-body">
+                                                        <a class="panel-heading" role="tab" id="headingOne"
+                                                           data-toggle="collapse"
+                                                           data-parent="#accordion" href="#collapseOne"
+                                                           aria-expanded="true"
+                                                           aria-controls="collapseOne">
+                                                            <h4 class="card-title">Collapsible Group Items #1</h4>
+                                                        </a>
+                                                        <div id="collapseOne" class="panel-collapse collapse in"
+                                                             role="tabpanel"
+                                                             aria-labelledby="headingOne">
+                                                            <div class="panel-body">
+                                                                <table class="table table-bordered">
+                                                                    <thead>
+                                                                    <tr>
+                                                                        <th>#</th>
+                                                                        <th>First Name</th>
+                                                                        <th>Last Name</th>
+                                                                        <th>Username</th>
+                                                                    </tr>
+                                                                    </thead>
+                                                                    <tbody>
+                                                                    <tr>
+                                                                        <th scope="row">1</th>
+                                                                        <td>Mark</td>
+                                                                        <td>Otto</td>
+                                                                        <td>@mdo</td>
+                                                                    </tr>
+                                                                    <tr>
+                                                                        <th scope="row">2</th>
+                                                                        <td>Jacob</td>
+                                                                        <td>Thornton</td>
+                                                                        <td>@fat</td>
+                                                                    </tr>
+                                                                    <tr>
+                                                                        <th scope="row">3</th>
+                                                                        <td>Larry</td>
+                                                                        <td>the Bird</td>
+                                                                        <td>@twitter</td>
+                                                                    </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="panel">
-                                                    <a class="panel-heading collapsed" role="tab" id="headingTwo"
-                                                       data-toggle="collapse" data-parent="#accordion"
-                                                       href="#collapseTwo"
-                                                       aria-expanded="false" aria-controls="collapseTwo">
-                                                        <h4 class="panel-title">Collapsible Group Items #2</h4>
-                                                    </a>
-                                                    <div id="collapseTwo" class="panel-collapse collapse"
-                                                         role="tabpanel"
-                                                         aria-labelledby="headingTwo">
-                                                        <div class="panel-body">
-                                                            <p><strong>Collapsible Item 2 data</strong>
-                                                            </p>
-                                                            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.
-                                                            Brunch 3 wolf moon tempor,
+                                                <div class="card">
+                                                    <div class="card-body">
+                                                        <a class="panel-heading collapsed" role="tab" id="headingTwo"
+                                                           data-toggle="collapse" data-parent="#accordion"
+                                                           href="#collapseTwo"
+                                                           aria-expanded="false" aria-controls="collapseTwo">
+                                                            <h4 class="card-title">Collapsible Group Items #2</h4>
+                                                        </a>
+                                                        <div id="collapseTwo" class="panel-collapse collapse"
+                                                             role="tabpanel"
+                                                             aria-labelledby="headingTwo">
+                                                            <div class="panel-body">
+                                                                <p><strong>Collapsible Item 2 data</strong>
+                                                                </p>
+                                                                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.
+                                                                Brunch 3 wolf moon tempor,
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="panel">
-                                                    <a class="panel-heading collapsed" role="tab" id="headingThree"
-                                                       data-toggle="collapse" data-parent="#accordion"
-                                                       href="#collapseThree"
-                                                       aria-expanded="false" aria-controls="collapseThree">
-                                                        <h4 class="panel-title">Collapsible Group Items #3</h4>
-                                                    </a>
-                                                    <div id="collapseThree" class="panel-collapse collapse"
-                                                         role="tabpanel"
-                                                         aria-labelledby="headingThree">
-                                                        <div class="panel-body">
-                                                            <p><strong>Collapsible Item 3 data</strong>
-                                                            </p>
-                                                            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.
-                                                            Brunch 3 wolf moon tempor
+                                                <div class="card">
+                                                    <div class="card-body">
+                                                        <a class="panel-heading collapsed" role="tab" id="headingThree"
+                                                           data-toggle="collapse" data-parent="#accordion"
+                                                           href="#collapseThree"
+                                                           aria-expanded="false" aria-controls="collapseThree">
+                                                            <h4 class="card-title">Collapsible Group Items #3</h4>
+                                                        </a>
+                                                        <div id="collapseThree" class="panel-collapse collapse"
+                                                             role="tabpanel"
+                                                             aria-labelledby="headingThree">
+                                                            <div class="panel-body">
+                                                                <p><strong>Collapsible Item 3 data</strong>
+                                                                </p>
+                                                                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.
+                                                                Brunch 3 wolf moon tempor
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
-                                            <!-- end of accordion -->
+                                        </div>
+                                        <!-- end of accordion -->
 
 
-                                        </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -891,94 +903,104 @@
                                             <!-- start accordion -->
                                             <div class="accordion" id="accordion1" role="tablist"
                                                  aria-multiselectable="true">
-                                                <div class="panel">
-                                                    <a class="panel-heading" role="tab" id="headingOne1"
-                                                       data-toggle="collapse"
-                                                       data-parent="#accordion1" href="#collapseOne1"
-                                                       aria-expanded="true"
-                                                       aria-controls="collapseOne">
-                                                        <h4 class="panel-title">Collapsible Group Item #1</h4>
-                                                    </a>
-                                                    <div id="collapseOne1" class="panel-collapse collapse in"
-                                                         role="tabpanel"
-                                                         aria-labelledby="headingOne">
-                                                        <div class="panel-body">
-                                                            <table class="table table-striped">
-                                                                <thead>
-                                                                <tr>
-                                                                    <th>#</th>
-                                                                    <th>First Name</th>
-                                                                    <th>Last Name</th>
-                                                                    <th>Username</th>
-                                                                </tr>
-                                                                </thead>
-                                                                <tbody>
-                                                                <tr>
-                                                                    <th scope="row">1</th>
-                                                                    <td>Mark</td>
-                                                                    <td>Otto</td>
-                                                                    <td>@mdo</td>
-                                                                </tr>
-                                                                <tr>
-                                                                    <th scope="row">2</th>
-                                                                    <td>Jacob</td>
-                                                                    <td>Thornton</td>
-                                                                    <td>@fat</td>
-                                                                </tr>
-                                                                <tr>
-                                                                    <th scope="row">3</th>
-                                                                    <td>Larry</td>
-                                                                    <td>the Bird</td>
-                                                                    <td>@twitter</td>
-                                                                </tr>
-                                                                </tbody>
-                                                            </table>
+                                                <div class="card">
+                                                    <div class="card-body">
+                                                        <a class="card-title" role="tab" id="headingOne1"
+                                                           data-toggle="collapse"
+                                                           data-parent="#accordion1" href="#collapseOne1"
+                                                           aria-expanded="true"
+                                                           aria-controls="collapseOne">
+                                                            <h4 class="card-title">Collapsible Group Item #1</h4>
+                                                        </a>
+                                                        <div id="collapseOne1" class="panel-collapse collapse in"
+                                                             role="tabpanel"
+                                                             aria-labelledby="headingOne">
+                                                            <div class="panel-body">
+                                                                <table class="table table-striped">
+                                                                    <thead>
+                                                                    <tr>
+                                                                        <th>#</th>
+                                                                        <th>First Name</th>
+                                                                        <th>Last Name</th>
+                                                                        <th>Username</th>
+                                                                    </tr>
+                                                                    </thead>
+                                                                    <tbody>
+                                                                    <tr>
+                                                                        <th scope="row">1</th>
+                                                                        <td>Mark</td>
+                                                                        <td>Otto</td>
+                                                                        <td>@mdo</td>
+                                                                    </tr>
+                                                                    <tr>
+                                                                        <th scope="row">2</th>
+                                                                        <td>Jacob</td>
+                                                                        <td>Thornton</td>
+                                                                        <td>@fat</td>
+                                                                    </tr>
+                                                                    <tr>
+                                                                        <th scope="row">3</th>
+                                                                        <td>Larry</td>
+                                                                        <td>the Bird</td>
+                                                                        <td>@twitter</td>
+                                                                    </tr>
+                                                                    </tbody>
+                                                                </table>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="panel">
-                                                    <a class="panel-heading collapsed" role="tab" id="headingTwo1"
-                                                       data-toggle="collapse" data-parent="#accordion1"
-                                                       href="#collapseTwo1"
-                                                       aria-expanded="false" aria-controls="collapseTwo">
-                                                        <h4 class="panel-title">Collapsible Group Item #2</h4>
-                                                    </a>
-                                                    <div id="collapseTwo1" class="panel-collapse collapse"
-                                                         role="tabpanel"
-                                                         aria-labelledby="headingTwo">
-                                                        <div class="panel-body">
-                                                            <p><strong>Collapsible Item 2 data</strong>
-                                                            </p>
-                                                            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.
-                                                            Brunch 3 wolf moon tempor,
+                                                <div class="card">
+                                                    <div class="card-body">
+                                                        <a class="card-title collapsed" role="tab" id="headingTwo1"
+                                                           data-toggle="collapse" data-parent="#accordion1"
+                                                           href="#collapseTwo1"
+                                                           aria-expanded="false" aria-controls="collapseTwo">
+                                                            <h4 class="card-title">Collapsible Group Item #2</h4>
+                                                        </a>
+                                                        <div id="collapseTwo1" class="panel-collapse collapse"
+                                                             role="tabpanel"
+                                                             aria-labelledby="headingTwo">
+                                                            <div class="panel-body">
+                                                                <p><strong>Collapsible Item 2 data</strong>
+                                                                </p>
+                                                                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.
+                                                                Brunch 3 wolf moon tempor,
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="panel">
-                                                    <a class="panel-heading collapsed" role="tab" id="headingThree1"
-                                                       data-toggle="collapse" data-parent="#accordion1"
-                                                       href="#collapseThree1"
-                                                       aria-expanded="false" aria-controls="collapseThree">
-                                                        <h4 class="panel-title">Collapsible Group Item #3</h4>
-                                                    </a>
-                                                    <div id="collapseThree1" class="panel-collapse collapse"
-                                                         role="tabpanel"
-                                                         aria-labelledby="headingThree">
-                                                        <div class="panel-body">
-                                                            <p><strong>Collapsible Item 3 data</strong>
-                                                            </p>
-                                                            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.
-                                                            Brunch 3 wolf moon tempor
+                                                <div class="card">
+                                                    <div class="card-body">
+                                                        <a class="card-title collapsed" role="tab" id="headingThree1"
+                                                           data-toggle="collapse" data-parent="#accordion1"
+                                                           href="#collapseThree1"
+                                                           aria-expanded="false" aria-controls="collapseThree">
+                                                            <h4 class="card-title">Collapsible Group Item #3</h4>
+                                                        </a>
+                                                        <div id="collapseThree1" class="panel-collapse collapse"
+                                                             role="tabpanel"
+                                                             aria-labelledby="headingThree">
+                                                            <div class="panel-body">
+                                                                <p><strong>Collapsible Item 3 data</strong>
+                                                                </p>
+                                                                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.
+                                                                Brunch 3 wolf moon tempor
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -989,7 +1011,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                             </div>
                             <div class="row">
                                 <div class="col-md-6 col-sm-6 col-12">
@@ -1050,7 +1071,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -1104,8 +1124,6 @@
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="row">
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -1219,7 +1237,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -1260,7 +1277,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -1382,7 +1398,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -1501,7 +1516,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
@@ -1691,8 +1705,7 @@
                                         </div>
                                     </div>
                                 </div>
-
-                                <div class="col-md-6">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pop Overs
@@ -1759,8 +1772,7 @@
                                         </div>
                                     </div>
                                 </div>
-
-                                <div class="col-md-6">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-align-left"></i> Progress bar
@@ -1965,7 +1977,6 @@
                                         </div>
                                     </div>
                                 </div>
-
                                 <!-- Start to do list -->
                                 <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
@@ -2041,8 +2052,7 @@
                                     </div>
                                 </div>
                                 <!-- End to do list -->
-
-                                <div class="col-md-6">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Daily active users

production/index2.html

@@ -348,7 +348,7 @@
                                                     </div>
                                                     <div class="tiles">
                                                         <div class="row">
-                                                            <div class="col-md-4 tile">
+                                                            <div class="col-md-4 tile col-sm-4 col-6">
                                                                 <span>Total Sessions</span>
                                                                 <h2>231,809</h2>
                                                                 <span class="sparkline11 graph" style="height: 160px;">
@@ -356,7 +356,7 @@
                                        style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
                           </span>
                                                             </div>
-                                                            <div class="col-md-4 tile">
+                                                            <div class="col-md-4 tile col-sm-4 col-6">
                                                                 <span>Total Revenue</span>
                                                                 <h2>$231,809</h2>
                                                                 <span class="sparkline22 graph" style="height: 160px;">
@@ -364,7 +364,7 @@
                                         style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
                           </span>
                                                             </div>
-                                                            <div class="col-md-4 tile">
+                                                            <div class="col-md-4 tile col-sm-4 col-6">
                                                                 <span>Total Sessions</span>
                                                                 <h2>231,809</h2>
                                                                 <span class="sparkline11 graph" style="height: 160px;">
@@ -514,17 +514,17 @@
 
                                                 <div class="col-md-5">
                                                     <div class="row" style="text-align: center;">
-                                                        <div class="col-md-4">
+                                                        <div class="col-md-4 col-sm-4 col-4">
                                                             <canvas class="canvasDoughnut" height="110" width="110"
                                                                     style="margin: 5px 10px 10px 0"></canvas>
                                                             <h5 style="margin:0">Bounce Rates</h5>
                                                         </div>
-                                                        <div class="col-md-4">
+                                                        <div class="col-md-4 col-sm-4 col-4">
                                                             <canvas class="canvasDoughnut" height="110" width="110"
                                                                     style="margin: 5px 10px 10px 0"></canvas>
                                                             <h5 style="margin:0">New Traffic</h5>
                                                         </div>
-                                                        <div class="col-md-4">
+                                                        <div class="col-md-4 col-sm-4 col-4">
                                                             <canvas class="canvasDoughnut" height="110" width="110"
                                                                     style="margin: 5px 10px 10px 0"></canvas>
                                                             <h5 style="margin:0">Device Share</h5>