Problems with Bootstrap grid portfolio on mobile device

Question

I'm attempting to get my Bootstrap portfolio image gallery to show 4 images at full size, less at tablet size and one at mobile phone size. I've worked on this for two days now (yes, I'm a newbie), and I cannot get the problem resolved. The gallery originally came using filters (Bootstrap, Wordpress, HTML etc), but I removed them in order to get a stacked gallery on mobile. As far as I can tell, the answer is in the UL class in the following code:

<section id="portfolio" class="container">
    <ul class="portfolio-items col-4">
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item1.jpg" alt="">
                <h5>Coble & Associates</h5>
                <div class="overlay">
                <a class="preview btn btn-danger" href="http://www.cobleandassociates.com/" target="_blank"prettyPhoto"><i class="icon-link"></i></a>             
                    <a class="preview btn btn-danger" href="images/portfolio/full/item1.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>             
                </div>

I can set the gallery to any many columns as I want by simply changing col-4 to column-6 etc, but whatever I change it to, that's how many columns I get at mobile size. I was told that I can use the code as something like col-sm-1 col-lg-4, and this does give me a single column at mobile size, however, it also gives me a single column at full browser size.

I've tried every combination there is, but it's just not working. Can anyone point me in the right direction, and do you need to see my CSS files? You can view the source code from my live site at http://www.prodesignnc.com/portfolio.html and any help on this would be greatly appreciated. Thank you. David

Edit

<section id="portfolio" class="container">
    <ul class="portfolio-items row">
 <li class="portfolio-item col-lg-4 col-md-6 col-sm-12">
         <div class="item-inner">

                <img src="images/portfolio/thumb/item1.jpg" alt="">
                <h5>Coble & Associates</h5>
                <div class="overlay">
                <a class="preview btn btn-danger" href="http://www.cobleandassociates.com/" target="_blank"prettyPhoto"><i class="icon-link"></i></a>             
                    <a class="preview btn btn-danger" href="images/portfolio/full/item1.jpg"  rel="prettyPhoto"><i class="icon-eye-open"></i></a>             
                </div>           
          </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item2.jpg" alt="">
                <h5>Herring & Mills</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item2.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>              
                </div>           
            </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item3.jpg" alt="">
                <h5>YCL Project</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item3.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>        
                </div>           
            </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item8.jpg" alt="">
                <h5>National Coaches Day</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item8.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>          
                </div>           
            </div>           
        </li><!--/.portfolio-item-->

Answer 1

Each portfolio item should be a col-* and the portfolio-items should be a row..

Demo: http://www.bootply.com/render/IuF5rpPzOy

Code: http://www.bootply.com/IuF5rpPzOy

Answer 2

I believe your ul needs to have the class of "row" and then add your column classes to each li. Try something like this:

<ul class="portfolio-items row">
     <li class="portfolio-item col-lg-4 col-md-6 col-sm-12">

col-lg-4 is for 3 columns on large displays, col-md-6 is for 2 columns on medium displays, and col-sm-12 is for 1 column on small displays