如何在 1 行的小屏幕上正确堆叠 col 元素？

Question

When using the built in bootstrap col classes, when I shrink my grid to mobile, the columns are taking 100% of the width of the row thus on mobile this results in a very long vertical list of items even though there should be space on the horizontal axis to accommodate for more items.

This is for a personal website I'm doing, it's a course section where I'm laying out a grid of the courses we would like to offer. The problem and what I've already tried is explained below.

This is the HTML I have:

  <div class="container courses-container">
        <div class="row justify-content-center courses-header no-gutters">
          <div class="col-1">
            <h2>Courses</h2>
          </div>
        </div>
        <div class="row courses">
          <div class="col-xs-1 col-md-2 course-item">
            <div >
              <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid"  >
            </div>
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
        </div>
        <div class="row courses">
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
          <div class="col-xs-1 col-md-2 course-item">
            <img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
          </div>
        </div>
      </div>

This is the CSS I'm using:

.courses-header {
    margin: 2em 0;
}

.carousel-container, .courses-container {
  padding: 0;
}

@media (min-width:  720px) {
  .courses {
  margin: 3em 0;
  }
}

@media only screen and (max-width: 767px) {
  .course-item {
    width: 33%;
  }
}

The last media query at the 767px breakpoint 'fixes' the issue by targeting the custom class i've set to each column so that I make them take up only 33% of the width on smaller screens, however if you comment out that section and preview this example on a smaller screen you'll see that each column will essentially sit on one line . This is why I've also set col-xs-1 on each item but I think I don't need it if I use another approach.

Is this the right way to do it because to me it seems like that there should be an easier way in which I can control the grid to be displayed properly on smaller screens.

The full layout on larger screens is taking 2 rows and each row has 6 columns in it. On smaller screens this layout is not possible since it's too wide.

I expect once I resize the browser window to a smaller one that the cols will break in to more rows vertically and they do but without adjusting their width with a media query each column breaks in to its own line taking 100% of it thus it creates alot of veritical space and it doesn't use the horizontal space properly as there's a lot of it left empty.

Ideally it should smoothly break the items in to more rows but keeping several columns on each line, the smaller the screen the less items on each line but at all times it should keep at least 2, if not 3 items side by side.

Answer 1

Use col-xs-2 on all <div class="col-xs-1 col-md-2 course-item">

Remove col-xs-1 and add col-xs-2