Using Bootstrap 4, I created an item list and divided it into two columns (see image). However, when I resized the website to a mobile size screen, it displayed like this:
https://i.sstatic.net/0iPHm.png
My desired outcome is for the list to display in one column when viewed on a mobile-sized (responsive) screen. Like so:
https://i.sstatic.net/bKEHH.png
The code I'm using:
.list-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: column;
}
li {
grid-column: 1;
}
li:nth-last-child(-n+7) {
grid-column: 2;
}<section class="info2">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Lorem ipsum dolor sit amet.</h2>
</div>
</div>
<ul class="list-group list-group-flush">
<!-- List items should be here -->
</ul>
</div>I'm a total beginner with this, so any help would be greatly appreciated.