Stack columns with flexbox - 2 columns on mobile screen, 3 columns on large screen

Question

I'm trying to design my flexbox to have 3 columns on a large screen and 2 columns on a mobile screen (see image 1 and 2 below). Here is my JS Fiddle and my code:

https://jsfiddle.net/kwxj83v6/6/

It works ok on large screen, but can't get it to render correctly on small screen.

    <div class="row">
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Semi Truck</h6>
        </div>
      </div>
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Box Truck</h6>https://jsfiddle.net/kwxj83v6/6/
        </div>
      </div>
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Dump Truck</h6>
        </div>
      </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Tow Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Tank Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Pickup Truck</h6>
      </div>
    </div>
  </div>

Thanks

Fareed Khan · Accepted Answer · 2020-05-24T17:14:56.617

col-xs-6 not works from now on with bootstrap. You can use col-6 for that in order to make two images side by side below lg screen

Extra: If you want to display two image only on sm screen not on md or lg than this is what you can used.

col-lg-4 col-md-4 col-6

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="row">
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Semi Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Box Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Dump Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Tow Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Tank Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Pickup Truck</h6>
      </div>
    </div>
  </div>

</body>

</html>

I just forget to put space between `col-lg-4col-md-6`, just edited it and it's working fine. — Fareed Khan, May 24 '20 at 17:17

score 1 · Answer 2 · answered May 23 '20 at 06:02

Part of the Bootstrap CSS is the following:

@media (min-width: 992px) {
    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

This makes sure on a screen larger than 992px the size of the flex children is 33%. There is no such CSS definition for .col-xs-6 so you need to add that yourself in a separate CSS file. Something like the following:

@media (max-width: 992px) {
    .col-xs-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

score 1 · Answer 3 · answered May 23 '20 at 06:12

In bootstrap 4 col-xs-* is updated as col-* You can refer the doc https://getbootstrap.com/docs/4.2/layout/grid/#grid-options

Here you can use col-6 or col-sm-6 based on your requirements

And also this bootstrap-cheatsheet helps a lot for quick reference. https://hackerthemes.com/bootstrap-cheatsheet/

Stack columns with flexbox - 2 columns on mobile screen, 3 columns on large screen

3 Answers3

Linked