My columns wont stack Bootstrap

[kylegilmartin5]

when I minimise the page the columns wont stack

<div class="row justify-content-center">
            <div
                class="col-1"><!--Left padding/filler-->

            </div>
            <div class="col-4"><!--img-->
                <!-- <img class="historypic" src="assets/img/scenery/history2.jpeg" alt="History of LFC">
                                <p>djfbjdfbnjdbf</p>-->
            </div>
            <div
                class="col-3"><!--about text-->

            </div>
            <div
                class="col-3">
                <!--twitter feed-->
                <a class="twitter-timeline" data-height="500" data-lang="en" data-link-color="#E81C4F" data-theme="light" data-width="500" href="https://twitter.com/LFC?ref_src=twsrc%5Etfw">Tweets by LFC</a>
                <script async charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
            </div>
            <div
                class="col-1"><!--Right padding/filler-->

            </div>
        </div>

[PaulOB]

That’s because you used col-1 which applies to small devices only.

See here:

Grid system

You need to use the col-md prefix for sizes greater than 768px. (Refer to the documentation for other sizes if needed.)

<div class="col-md-4"><!--img--> 
      <!-- <img class="historypic" src="assets/img/scenery/history2.jpeg" alt="History of LFC">
                            <p>djfbjdfbnjdbf</p>--> 
 </div>

etc…

[kylegilmartin5]

Thanks