Бутстрап ломает ряд ячейки в производстве

Question

У меня проблема с начальной позицией строки / ячейки.

Я генерирую 6 столбцов в одном ряду, и в моем окружении разработчика у меня нет этой проблемы, но при производстве одна ячейка перемещается в третий ряд.

Вот как это выглядит:

https://screenshots.firefox.com/byRFg1d6kWAPKbc0/www.javascript.ba

Вот также HTML:

Моя цель состоит в том, чтобы эти шесть ячеек располагались в два ряда

<div class="sections">
        <h2 class="heading">Most Viewed News Today</h2>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <!-- Video Box Start -->
        <div class="videobox2">
            <figure>
                <!-- Video Thumbnail Start --> 
                <a href="/posts/the-best-node-js">
                    <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/058/original/open-uri20180902-27786-uhm319.jpg?1535909323">
</a>                <!-- Video Thumbnail End -->
                <!-- Video Info Start -->
                <div class="vidopts">
                    <ul>
                        <li><i class="fa fa-eye"></i>43</li>
                        <li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <!-- Video Info End -->
            </figure>
            <!-- Video Title Start -->
            <h4><a href="/posts/the-best-node-js">The Best Node.js </a></h4>
            <!-- Video Title End -->
        </div>
        <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/quasar-framework">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/053/original/open-uri20180902-27786-1f5glft?1535899755">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>24</li>
                                <li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/quasar-framework">Quasar Framework</a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/dependency-injection-smart-table-advanced-patterns">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/024/original/javascript1.jpg?1535792343">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>5</li>
                                <li><i class="fa fa-clock-o"></i>08:08 01/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/dependency-injection-smart-table-advanced-patterns">Dependency Injection &amp; Smart Table: Advanced Patterns</a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/the-best-node-js">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/058/original/open-uri20180902-27786-uhm319.jpg?1535909323">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>43</li>
                                <li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/the-best-node-js">The Best Node.js </a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/quasar-framework">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/053/original/open-uri20180902-27786-1f5glft?1535899755">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>24</li>
                                <li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/quasar-framework">Quasar Framework</a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/dependency-injection-smart-table-advanced-patterns">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/024/original/javascript1.jpg?1535792343">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>5</li>
                                <li><i class="fa fa-clock-o"></i>08:08 01/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/dependency-injection-smart-table-advanced-patterns">Dependency Injection &amp; Smart Table: Advanced Patterns</a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>

        </div>
    </div>

Answer 1

Вы можете просто сделать 2 строки вместо 1

Каждый столбец имеет col-lg-4 col-md-4 col-sm-4 col-xs-12 (таким образом, у вас будет 3 "ячейки" в каждом ряду) - но, конечно, на меньших экранах вы должны отрегулировать, следовательно, col-xs-12

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
</div>

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
</div>