Boostrap 4 Grid System для мобильных и настольных компьютеров

Question

Я хотел бы построить грид-систему с использованием boostrap 4, у меня есть газета, в которой в режиме планшета / рабочего стола отображаются три столбца в каждой строке, вместо этого в мобильном режиме я хотел бы отображать только один столбец в каждой строке. Документация по этой ссылке https://getbootstrap.com/docs/4.1/layout/grid/ опишите префикс класса на нескольких устройствах. В режиме планшета / рабочего стола все работает хорошо, но в мобильном режиме у меня проблемы.

Это изображение показывает, как должно быть в мобильном режиме

На этих рисунках показаны проблемы, которые возникают у меня в мобильном режиме

Это код:

<div class="container">
<div class="row no-gutters">
  <!-- Article 1 -->     
       <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
         <div class="content">
            <div id='column1' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
    <!-- Article 2 -->
       <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
        <div class="content">
            <div id='column2' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
    <!-- Article 3 -->
       <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
        <div class="content">
            <div id='column3' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
</div>

Answer 1

Во-первых col-sm-12 col-lg-4 col-xl-4 не требуется. Bootstrap Grid работает хорошо. Может быть, ваш заголовок (SERIE BI) слишком длинный. Попробуйте дать ему max-width: 100%

Answer 2

Просто используйте class="col-4" достаточно

Вам не нужны все эти стили col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4

<link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
 integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
 crossorigin="anonymous">

<div class="container">
<div class="row no-gutters">
  <!-- Article 1 -->     
       <div class="col-4">
         <div class="content">
            <div id='column1' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
    <!-- Article 2 -->
       <div class="col-4">
        <div class="content">
            <div id='column2' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
    <!-- Article 3 -->
       <div class="col-4">
        <div class="content">
            <div id='column3' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
</div>