I'm trying to create responsive web layout where i should have different view in different devices screen.

1. 2 rows 6 columns (large screen, iPad Pro and other devices)
2. 3 rows 4 columns (iPhone 6/7/8 plus)
3. 4 rows 3 columns (iphone 6/7/8 and smaller device)

this is what i have tried

```
<div class="row">
    <div class="col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="col-xs-2 col-md-2 ">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>

    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
</div>

```

i've 2 row 6 colum in big screens but in iPhone 6/7/8 plus and iphone 6/7/8 and smaller device i get only one column.
i don't know how to fix it, hope my problem is clear :) thanks