Doe Doe - 3 months ago 16
CSS Question

Bootstrap lists inside panel are not responsive

I'm creating the menu of a page in bootstrap 3.
This is my panel I have cretaed.enter image description here
Here is my code of a panel I created:



<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="panel mepanelo">
<div class="row ">
<div class="col-md-4 big_list">
<ul class="list1">
<li><a class="btn" role="button" href="figurini.php">Figurini</a>
</li>
<li><a class="btn" role="button" href="mezzi.php">Mezzi Militari</a>
</li>
<li><a class="btn" role="button" href="accessori.php">Accessori</a>
</li>
<li><a class="btn" role="button" href="strumenti.php">Strumenti</a>
</li>

</ul>
</div>
<div class="col-md-4 big_list">
<ul class="list1 ">
<li><a class="btn" role="button" href="fantasy.php">Fantasy</a>
</li>
<li><a class="btn" role="button" href="aerei.php">Aerei</a>
</li>
<li><a class="btn" role="button" href="ambientazioni.php">Ambientazioni</a>
</li>
<li><a class="btn" role="button" href="edizioni.php">Edizioni</a>
</li>

</ul>
</div>
<div class="col-md-4 big_list">
<ul class="list1">
<li><a class="btn" role="button" href="busti.php">Busti</a>
</li>
<li><a class="btn" role="button" href="navi.php">Navi</a>
</li>
<li><a class="btn" role="button" href="colori.php">Colori</a>
</li>
<li><a class="btn" role="button" href="occasioni.php">Occasioni</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>





This panel and the lists inside it are responsive but the problem is that when the page is in the size of a tablet here is how the lists appear:
enter image description here
I don't want all that blank gray space there but I want all the elements to appear in 2 lists for tablet and not in one list. I proved something like hidden-sm but this hides the things. Is there a way to put all the eleemts which are in three lists just in 2 lists for tablet? Thanks!

San San
Answer

use <div class="col-md-4 col-sm-4 big_list"> instead of <div class="col-md-4 big_list">