Want display page the same no matter the screen size bootstrap

How can I style the page that the display to be the same on the small screen and also on the large screen? On the large screen everything is perfect, but if I move the page on a smaller screen, then the things start to mess up. The following code: (it is made with bootstrap and css)

<div class="list-group">
            <ul class="panel-info col-lg-12 list">
                <li class="list-group-item list__item col-lg-4" ng-repeat="entity in entitiesPaginated">
                </li>
            </ul>
</div>

I will not write here all the code because I think the most important part is the bootstrap part, what should I change on it in order that the display to be the same no matter the screen display? Thank you

set col classes also for the other viewports: col-md-,col-sm-,col-xs-*

Here an example:

<div class="list-group">
            <ul class="panel-info col-lg-12 col-md-12 col-sm-12 col-xs-12 list">
                <li class="list-group-item list__item col-lg-4 col-md-4 col-sm-4 col-xs-4" ng-repeat="entity in entitiesPaginated">
                </li>
            </ul>
</div>

You should read about the Bootstrap grid system

Only use the grid class for the smallest breakpoint…

<div class="list-group">
            <ul class="panel-info col-12 list">
                <li class="list-group-item list__item col-4">
                </li>
            </ul>
</div>

From the Bootstrap 4 docs…

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes.

Note that in Bootstrap 4 Beta, the -xs- infix is no longer used since xs is the default breakpoint. It’s simply col-12 instead of col-xs-12.