Search code examples
csshtmlbootstrap-4css-grid

responsive list-group item from two columns into one

I am using Bootstrap 4 and created a item list and separated it in two two columns (see picture). When I shrank the website down to mobile size screen then it is showing like this:

now

But I want when I shrank it to mobile size (responsive) that it shown me only in one column. I want it then to be like this:

how I want

This is my code:

.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">
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum, dolor sit amet consectetur adipisicing.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
    </ul>
  </div>

I would appreciate your help even this is a total beginner question.

Solution

  • You could just add in a few media queries, so that the CSS is only applied on certain sized devices.

    In order for it to be one column on mobile and two columns on larger devices, you need to put the CSS that you created for making it two columns in a media query that says 'over a certain device width, apply this'.

    .list-group {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width:767px) {
.list-group {
  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">
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum, dolor sit amet consectetur adipisicing.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
    </ul>
  </div>

    (Run code snippet to see mobile layout, then view full screen to see larger device layout)