Bootstrap News Slider

Question

Great, I got a slider problem.

I have a slider with 3 news boxes and I want to run 3 in 3 boxes, so far so good, is already working, but the problem and when I pass to mobile device the content is changed to block but instead of increasing me the bottom box is over all the content below

NEWS

     <div class="carousel slide" id="noticias">
            <div class="carousel-inner conteudo">
              <div class="item active" id="noticias">





                <div class="col-md-4">
                    <div class="service-item">
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_01.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>              
                <div class="col-md-4" >
                    <div class="service-item">                                                      
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_02.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>                  
                <div class="col-md-4">
                    <div class="service-item">                      
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_03.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>








        </div>




        <div class="item">
                <div class="col-md-4">
                    <div class="service-item">
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_01.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>              
                <div class="col-md-4" >
                    <div class="service-item">                                                      
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_02.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>                  
                <div class="col-md-4">
                    <div class="service-item">                      
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_03.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>

        </div>
    </div>
</div>


<div class="control-box">                            
        <a data-slide="prev" href="#noticias" class="carousel-controla left">‹</a>
        <a data-slide="next" href="#noticias" class="carousel-controla right">›</a>
    </div><!-- /.control-box -->
            </div>
        </div>
    </section>

the goal was to have something of this kind:

Answer 1

The class col-md-4 is only applied if the screen is at least 970px wide.

To work on mobile devices add other classes according to screen size as per described in the documentation in:

<div class="col-md-4" >

suggest adding to classes col-xs-4 or col-sm-4.

Answer 2

Try using the . clearfix class on the slider, take a look at the documentation http://getbootstrap.com/css/#helper-classes-clearfix